0

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

我的问题是我只想在点击鼠标离开计算器包装器时关闭计算器。$('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>

4

3 回答 3

0

尝试：

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

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

于 2012-08-08T07:11:46.530 回答
0 
$('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.
     }
})
于 2012-08-08T07:16:47.130 回答
0

我找到了解决方案。

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

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

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

期望这个变量包含整个 HTML 正文。因此，无论您在该区域 (var CurrCalculator) 的哪个位置单击，您的计算器都将打开。如果在计算器外点击，则会关闭。

于 2012-08-08T10:12:12.653 回答