Question

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

在此图像的顶部，我显示一个自定义工具提示，它只是一个包含文本的div。当我在工具提示上mousewheel时，图像不会被缩放。

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

我怎么能：

~~获取图像 offsetX和offsetY，即使光标位于工具提示上方也是如此？或~~

~~阻止工具提示在图像之前捕获鼠标滚轮事件？~~

修改实际上，之前，我可以点击它来选择工具提示;但是通过添加CSS样式'pointer-events:none'（由 Aramil Rey 建议），click事件没有效果（显然）。

因此，我怎么能：

阻止工具提示在图像之前捕获mousewheel事件？
仍然让工具提示抓住click事件？

Answer 1

我假设您目前从offsetX获得offsetY和event.target。为图像设置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
});

Answer 2

您是否尝试在工具提示中使用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>

在另一个元素

2 个答案: