javascript - 在另一个元素上触发特定的鼠标事件

Question

我有一个包含图像的网络应用程序，在该图像上捕获了 mousewheel 事件，以便在光标所在的位置精确缩放图像。

在此图像之上，我显示了一个自定义工具提示，它只是一个包含文本的 div。当我在工具提示上 mousewheel 时，图像没有缩放。

我尝试在工具提示上绑定(bind)图像 mousewheel 事件，但是事件的 offsetX 和 offsetY 对应于光标位置相对于工具提示而不是相对于图像。

我怎样才能:

• 要么获取图像 offsetX 和offsetY，即使光标位于工具提示上？或
• 防止工具提示在图像之前捕获鼠标滚轮事件？

编辑:实际上，以前，我可以通过单击来选择工具提示；但是通过添加 CSS 样式 'pointer-events:none'(Aramil Rey 建议)，click 事件没有效果(很明显) .

因此，我怎样才能:

• 防止工具提示在图像之前捕获 mousewheel 事件？
• 仍然让工具提示捕捉click事件？

Answer 1

您是否尝试过在工具提示上使用 CSS:pointer-events:none;？

JS Fiddle

尝试将鼠标悬停在红色 div 上，您会注意到它不会触发其附加事件，相反，如果您输入该 div，它会在 mouseeenter 事件上触发黄色 div，即使您的光标位于红色 div 上也是如此。

$('.asd').on('mouseenter', function() {
    alert('asd');
});

$('.ddaa').on('mouseenter', function() {
    alert('ddaa');
});

.ddaa {
    padding-top: 15px;
    background-color: yellow;
}

.asd {
    position: absolute;
    width: 100%;
    pointer-events:none;
    padding-top: 10px;
    top: 5px;
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ddaa">
</div>
<div class="asd">
</div>