鼠标按下。在兄弟姐妹 event.targets 上传播答案

【问题标题】：mousedown. propagation on siblings event.targets鼠标按下。在兄弟姐妹 event.targets 上传播
【发布时间】：2021-11-17 23:31:52
【问题描述】：

我有 2 个具有“绝对位置”的兄弟节点，它们都处理 mousedown 事件。当我单击“div 2”的透明区域（在图片上）时，如何触发“div 1”的处理程序。

【问题讨论】：

标签： javascript siblings mousedown

【解决方案1】：

如果重叠元素是动态的，我认为不可能使用常规事件冒泡来实现这一点，因为有问题的两个重叠元素是“兄弟姐妹”。

我遇到了同样的问题，我可以通过更多的 hitTest 场景来解决它，我可以在其中测试用户的鼠标位置是否在同一区域内。

function _isMouseOverMe(obj){
    var t = obj.offset().top;
    var o = obj.offset().left;
    var w = obj.width();
    var h = obj.height();
    if (e.pageX >= o+1 && e.pageX <= o+w){
        if (e.pageY >= t+1 && e.pageY <= t+h){
            return true;
        }
    }
    return false
}

【讨论】：

【解决方案2】：

您需要使用 3 个事件处理程序，一个用于 div1，一个用于 div2，一个用于 contentArea。 contentArea 处理程序应停止传播，以便不调用 div2 处理程序。 div2 处理程序应该调用 div1 处理程序：

function div1Click (e)
{
    // do something
}
function div2Click (e)
{
    div1Click.call(div1, e);
}
function contentAreaClick (e)
{
    e = e || window.event;
    if (e.stopPropagation) e.stopPropagation();
    e.cancelBubble = true;
    // do something
}
div1.onclick = div1Click;
div2.onclick = div2Click;
contentArea.onclick = contentAreaClick;

【讨论】：

问题是，就我而言，我有很多这样的 div，它们是动态的（可拖动的）并且 div1 具有相同的结构，所以我不能以这种方式处理事件

【解决方案3】：

您正在查看的是 CSS 的 pointer-events 属性。我没有进行研究以了解在提出问题时它是否可用，但我遇到了同样的事情，我冒昧地介绍它。

这是你的两个 DIV：

<body>
    <div class="inner div-1"></div>
        
    <div class="inner div-2">
        <div class="div-2__content-area"></div>
    </div>
</body>

样式：

.inner {
  height: 10em;
  position: absolute;
  width: 15em;
}
.div-1 {
  /* Intrinsic styling & initial positioning, can be arbitrary */

  background: #ff0;
  left: 50%;
  top: 50%;
  transform: translate(-75%, -75%);
}
.div-2 {
  /* Intrinsic styling & initial positioning, can be arbitrary */

  background: rgba(0, 255, 0, 0.25);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  /* Centering content area */

  align-items: center;
  display: flex;
  justify-content: center;

  /* Key feature -- making visible part of transparent DIV insensitive to mouse (pointer) events), letting them fire on the underlying element */

  pointer-events: none;
}
.div-2__content-area {
  /* Styling content area */

  background: #f00;
  height: 75%;
  width: 75%;

  /* Reverting 'pointer-events' perception to regular */

  pointer-events: auto;
}

事件监听器和显示：

document.querySelector(".div-1").addEventListener("mousedown", (_) => {
    alert("div 1");
});
document.querySelector(".div-2__content-area").addEventListener("mousedown", (_) => {
    alert("Content area");
});

这一切都在 codepen 上：

https://codepen.io/Caaat1/pen/RwZEJVP

【讨论】：