0

テキストボックスに焦点を当てると開く電卓があります。この電卓には、外側のラッパーと、電卓ボタンを持つ子 div コンテナーがあります。

私の問題は、電卓ラッパーからマウスをクリックしたときにのみ電卓を閉じたいことです。しかし、私が使用したこのコード$('html').bind('click', function ().... は、Calculator-buttons をクリックするたびに発生し、上記のコードは、Calculator-Buttons を含む子 div コンテナーではなく、calculator-wrapper でのみスコープします。

電卓ラッパー ### -<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').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

試す：

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

本文は削除できますが、ラッパーがすべての Web ページをカバーしていない可能性があるため、追加しました。

于 2012-08-08T07:11:46.530 に答える