在计算器包装外部单击时关闭计算器

Question

我有一个计算器，它打开的重点是文本框。这个计算器有外包装和子div容器，其中有计算器按钮。

我的问题是，我只想在calculator包装器之外单击鼠标来关闭计算器。但是我使用$('html').bind('click', function ()....的这段代码在我每次点击计算器按钮时都会发生，上面的代码范围只在计算器包装器上，而不是在包含计算器按钮的子div容器上。

计算器包装器### - <div class="calc-wrapper">

计算器按钮### - <div class="calc-button-wrapper-operator">

<div class="calc-wrapper">
<div class="calc-button-wrapper-operator">
    <div class="calc-button">9</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">8</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">7</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">6</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">5</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">4</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">3</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">2</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">1</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">0</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">.</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">-</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">+</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">*</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">/</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">C</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">=</div>
</div>

​

Answer 1

我找到了解决这个问题的办法。

var CurrCalculator = $(CalControl).parent();

    $($('html').not($(CurrCalculator))).bind('click', function (event) {...
   below this code to hide the current Calculator 
...});

第一行获取当前容器的实例。

期望此变量包含整个HTML正文。所以无论你点击这个区域的什么地方(var，CurrCalculator)，你的计算器都是打开的。如果在外部单击，计算器将关闭。

Answer 2

尝试：

$('body, .calc-wrapper').click(function (e){
   $('.calc-close').hide(); // or your code to clode
});

你可以删除正文，我添加了它，而你的包装器可能没有覆盖所有的网页。

Answer 3

$('body').unbind('click.closeCalc').bind('click.closeCalc', function(event){
     if(!($(event.target).hasClass('calc-wrapper') || 
               $(event.target).parents('.calc-wrapper').length == 1){
           // code to hide the calculator here.
     }
})