单击Calculator包装器外部关闭计算器

Question

我有一个计算器，专注于文本框打开。 这个计算器有外包装和子div容器，它有计算器按钮。

我的问题是我只想在点击计算器包装器的鼠标上关闭计算器。但是每次我点击Calculor按钮时，我使用$('html').bind('click', function ()....的代码就会出现，而上面的代码范围只出现在calcultor-wrapper上，而不是在包含Calculator-Buttons的子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

尝试：

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

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

Answer 2

$('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.
     }
})

Answer 3

我找到了解决方案。

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

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

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

期望此变量包含整个HTML正文。所以无论你在哪里点击这个区域（var CurrCalculator），你的计算器都会打开。如果在计算器外面点击关闭。