javascript - 有没有办法在覆盖元素上有选择地使用鼠标事件？

Question

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

有什么想法吗？

对于 slider ，我使用的是 Angular Materials 的“mat-slider”。对于图标，我有使用 matTooltip 的垫子图标。

我认为这个问题不一定是 Angular 特有的，但我非常感谢任何帮助:)

要显示的代码不多，但这是 slider 外观的图像。评论图标可以阻止点击 slider 。现在，我有使用此类的评论图标:

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

Answer 1

这很难，因为像 pointer-events: none; 这样的东西会阻止悬停甚至 JS 监听鼠标悬停事件。

您可以做的是向工具提示添加点击监听器，如果鼠标位置在 slider 的范围内，它也会触发点击事件。

类似于:

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();
  }
});

这是一个快速的 fiddle :http://jsfiddle.net/wfpv5oka/2/