检测mousemove，但让单击事件通过

Question

我正在研究一个覆盖层。我需要点击才能传递到下面的HTML元素，为此我可以使用“指针-事件:无”。但是，我也需要覆盖来检测mousemove事件，这样我就可以在鼠标光标所在的位置上画一个巨大的十字线。问题是，将“指针-事件”设置为“无”会阻止那些mousemove事件的触发。

有什么建议吗？

Answer 1

在这种情况下，您需要从窗口获取mousemove事件，而不是覆盖。

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

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

(或者，如果窗口对您来说太宽了，请使用与您交互的元素的最近的父元素-它会给出与覆盖相同的坐标)

Answer 2

您可以创建一个大小相同的overlay的父级，并且可以通过CSS定制一个交叉鼠标光标，并包含要捕获单击事件的元素。然后，子程序仍然能够捕获单击事件。

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/