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

Question

我有一个 Web 应用程序，其中包含一个捕获 mousewheel 事件的图像，以便将图像精确地缩放到光标所在的位置。

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

我尝试在工具提示上绑定图像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>

Answer 2

我假设您目前正在从event.target 获得offsetX 和offsetY。为图像设置一个 ID，并将event.target 替换为$("#imageID")[0]。更好的是，jquery 提供了一个offset function。

var image = $('#image');

image.add('.tooltip').bind('mousewheel', function (event) {
     event.preventDefault();

     var offset = image.offset();
     var mouseX = event.pageX - offset.left;
     var mouseY = event.pageY - offset.top;

     // zoom stuff
});