事件超出边际

Event over a margin

本文关键字：事件      更新时间：2023-09-26

Having: 

<div id="outerDiv">
    <div id="innerDiv" style="margin: 10px">Content goes here</div>
</div>

我想识别那些发生在innerDiv外部但在outerDiv内部的鼠标事件(换一种方式说，这些事件在innerDiv边距上)。

这很容易实现，如果我添加外div填充或边界，但我想知道是否有另一种方法来做到这一点，而不必添加额外的像素到外div。

谢谢

使用jQuery，我将执行以下操作

$("#outerDiv").bind("event", function(e) {
  if ($(e.target).closest("#innerDiv")) {
    alert("from inner div");
  }
  else {
    alert("from outer div only");
  }
});

解释:

#outerDiv将得到一个冒泡事件。如果事件的目标或目标的祖先是#innerDiv，那么我们知道它起源于内部div，否则不是。由于它击中了#outerDiv，我们知道它发生在#outerDiv的某个地方，而不是#innerDiv

这可以通过使用一个标志来实现:

<div id="outerDiv" style="border:thin solid red;">
    <div id="innerDiv" style="border:thin solid blue; margin: 10px;">Content goes here</div>
</div>
<script language="javascript">
var flag = false;
document.getElementById("outerDiv").onclick = function(){
    if (flag) {
        flag = false;
        return false;
    }
    alert("Clicked outerDiv");
}
document.getElementById("innerDiv").onclick = function(){
    flag = true;
    alert("Clicked innerDiv");
}
</script>

本质是innerDiv的事件将首先触发。如果是，阻止outerDiv的事件。

该技术适用于onmousedown, onmouseup和onmousemove。

相关文章：