javascript 让click事件遍历一个元素而不删除该元素的指针事件

qco9c6ql  于 2022-12-21  发布在  Java
关注(0)|答案(2)|浏览(134)

我有一个绝对位置的div在另一个相对位置的div之上。它们都是独立的div。
我想做的是:当我点击绝对位置的div时,我想注册那个点击,我想让那个点击穿过它并注册到它下面的div上。
在顶部div上使用CSS的pointer-events: none;不起作用,因为这样我就无法注册对它的点击。
这可能吗?
总之:我需要一种方法,让事件通过元素,而不删除该元素的事件侦听器。

z4iuyo4d

z4iuyo4d2#

当点击div#1时,使用elementsFromPoint方法检查div#2是否在div#1下。
如果是,则在div#2上创建并调度另一个click事件。

document.addEventListener('click', e => {
  console.log(e.target.id);
  if (e.target.id === 'one') {    
    const two = [...document.elementsFromPoint(e.clientX, e.clientY)]
                .find(el => el.id === 'two');

    if (two) {
      const clickEvent = document.createEvent('MouseEvents');
      clickEvent.initMouseEvent('click', !0, !0, window, 1, e.screenX, e.screenY, e.clientX, e.clientY, !1, !1, !1, !1, 0, null);
      two.dispatchEvent(clickEvent);
    }
  }
})
#one, #two {
position:absolute; z-index:0;
width:150px; height:150px;
background:#f009;
transform: rotateZ(30deg);
}

#two {
z-index:-1; left:100px;
background:#00f9;
transform:rotate(45deg);
}

/* ignore th following */
.as-console-wrapper {
left:50% !important; top:0; max-height:100% !important;
}
<div id="one"></div>
<div id="two"></div>

相关问题