div onclick 仅在可视区域答案

【问题标题】：div onclick only in viewable areadiv onclick 仅在可视区域
【发布时间】：2012-05-21 13:39:11
【问题描述】：

这里是场景：

<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 区域时发生。我怎样才能做到这一点？

提前致谢！

【问题讨论】：

标签： javascript html onclick textarea

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

根据哪些条件取消事件（我假设 div 的 onclick ）？什么时候取消？我怎么知道光标是否在文本区域内？
在 textarea 上，改为设置 ondblclick="alert(1); return false;"。
是的，抱歉，我刚刚注意到您正在侦听 dblclick 事件。因此，只需将其添加到文本区域：onclick="if (event.stopPropagation) event.stopPropagation(); else event.cancelBubble=true;"。 textarea 上的 dblclick 事件没有被触发，因为 div 上的 click 事件在此之前触发，并使用 alert 阻止 Javascript 执行。再说一次，考虑使用addEventListener。
成功了，谢谢！ wicl 按照 Kooilnc 的建议彻底阅读传播

【解决方案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  

});

【讨论】：