Jquery 在计算器包装外单击关闭计算器

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

我的问题是，我只想在计算器包装外单击鼠标关闭计算器。但是我每次单击Calculor按钮时都会使用此代码，

$（'html'）.bind（'click'，function（）..

），并且上面的代码只作用于calcultor包装，而不作用于包含Calculator按钮的子div容器

计算器包装器###-

计算器按钮###-

9
8.
7.
6.
5.
4.
3.
2.
1.
0
.
-
+
*
/
C
=

试试：

---

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

我找到了解决方案

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

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

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

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

---

除此之外，整个HTML正文都包括在内。因此，无论在何处单击此区域（var CurrCalculator），您的计算器都将打开。如果在计算器外部单击，则计算器将关闭。

使用mouseenter和mouseleave事件，请参阅：这是否会与OP的要求相反？

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

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

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