检测鼠标移动但让点击事件通过

Question

我正在处理一个叠加层。我需要点击才能传递到下面的 HTML 元素，为此我可以使用 "pointer-events: none"。但是，我还需要叠加层来检测 mousemove 事件，以便我可以在鼠标光标所在的位置绘制一个巨大的十字准线。问题是将 "pointer-events" 设置为 "none" 会停止触发这些 mousemove 事件。

建议？

Answer 1

您可以制作 overlay 的 parent 大小相同，并且可以通过 CSS 自定义 cross-hair 鼠标光标并包含您想要的元素捕获点击事件。然后 child 仍然可以捕获点击事件。

HTML:

<div class="overlay-parent">
    <div class="below">This is the content below</div>
    <div class="overlay">This is the overlay</div>
</div>

CSS:

.overlay-parent, .overlay {
    top:0;
    bottom:0;
    left:0;
    right:0;
    position:absolute;
    cursor:crosshair;
}
.overlay {
    background-color:rgba(255, 0, 0, 0.5);
    pointer-events:none;
}
/* just to make it clear */
 .below {
    margin-top:100px;
}

Javascript:

$('.below').click(function () {
    console.log('clicked');
});

演示：http://jsfiddle.net/7oLnnaxc/

Answer 2

在这种情况下，您需要从 window 而不是叠加层获取 mousemove 事件。

$(window).mousemove( function(e){
    $('.v').css('left', e.clientX + 'px');
    $('.h').css('top', e.clientY + 'px');
});

演示：http://jsfiddle.net/jze4acsd/1/

（或者，如果 window 对您来说太宽泛，请使用与您交互的元素的最近父级 - 它会为您提供与叠加层相同的坐标）

检测鼠标移动但让点击事件通过

Detect mousemove but let click events pass through

javascript

jquery

click