有没有办法在重叠元素上有选择地使用鼠标事件？

Question

我有一个应该处理所有单击事件的滑块组件。我使用绝对定位在此滑块上覆盖了一些工具提示图标。我希望能够将鼠标悬停在工具提示图标上并触发其鼠标悬停事件，但我不希望这些图标阻止滑块上的单击。

有什么想法吗？

对于滑块，我使用的是Angular Materials的“垫子滑块”。对于图标，我有使用matTooltip的垫图标。

我认为这个问题不一定真的是特定于Angular的，但我将不胜感激：）

没有太多代码要显示，但这是滑块的外观图像。评论图标可能会阻止单击滑块。现在，我有使用此类的注释图标：

.comment-icon {
position: absolute;
z-index: -1;
}

Answer 1

这是一个艰难的过程，因为类似pointer-events: none;这样的东西会阻止悬停，甚至JS也无法监听鼠标悬停事件。

您可以做的是在工具提示中添加一个点击侦听器，如果鼠标位置在滑块的边界内，它也会触发点击事件。

类似的东西：

document.querySelector('.comment-icon').addEventListener('click', e => {
    const slider = document.querySelector('.slider');
    const sliderBounds = slider.getBoundingClientRect();

  if (e.clientX >= sliderBounds.left && e.clientX <= sliderBounds.right
    && e.clientY >= sliderBounds.top && e.clientY <= sliderBounds.bottom) {
        slider.click();
  }
});

这里是一个小提琴：http://jsfiddle.net/wfpv5oka/2/