8

图片

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

4

3 回答 3

4

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

我遇到了同样的问题，我能够通过更多的 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
}
于 2012-03-01T02:49:09.517 回答
0

您需要使用 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;
于 2011-10-18T17:34:29.310 回答
0

您正在寻找的是 CSS 的指针事件属性。我没有进行研究以了解在提出问题时它是否可用，但我面临同样的事情，我冒昧地报道它。

这是你的两个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

于 2021-11-17T12:31:00.497 回答