javascript - div onclick 仅在可视区域

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。我希望 div 的 onclick 仅在我单击 textarea 未覆盖的 div 区域时发生。我怎样才能做到这一点？

提前致谢！

Answer 1

尝试阅读事件委托并不显眼地添加处理程序

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

编辑 一个基本示例（使用 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  

});