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

Question

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

有任何想法吗？

对于滑块，我使用的是Angular Materials的“mat-slider”。对于图标，我有mat-icons使用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/