Question

这是场景：

<div style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #000000" onclick="alert(0)">
    <textarea style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #FF0000" ondblclick="alert(1)"></textarea>
</div>

主要问题是textarea的ondblclick事件没有被触发。

如果我尝试在textarea中双击，则会触发div onclick。我希望只有当我点击未被textarea覆盖的div区域时才会发生div的onclick。我怎样才能做到这一点？

提前致谢！

Answer 1

尝试阅读event delegation并添加处理程序unobtrusively

基本上，您可以为div元素分配一个click或dblclick处理程序。在该处理程序中，您可以确定原始元素并采取必要的操作。这些链接应该为您提供有关该链接的更多信息。

编辑 a basic example（使用jquery和一个处理函数）

Answer 2

取消活动。对于传统的事件附加，你必须将return false;放在最后，但我建议使用一些更现代的方法来附加事件监听器（即，addEventListener或attachEvent用于IE8和以上）。

Answer 3

您可以使用计时器来检测意图。

发生点击时设置计时器，如果没有后续点击，将会执行。

双击清除计时器并执行默认的双击功能。

如下所示，

var dblClickIntentTimer = null;

elem.click(function(){
   dblClickIntentTimer = setTimeout(function() {
      //Wait for 100 ms and then execute 'click' functionality here
   }, 100);
});


elem.dblclick(function(){
   clearTimeout(dblClickIntentTimer);

   //Do double-click functionality here  

});

div仅在可视区域内点击

3 个答案: