Question

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

建议？

Answer 1

您可以创建大小相同的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/

Answer 2

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

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

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

（或者，如果窗口太宽，请使用与您交互的元素的最近父元素 - 它将为您提供与叠加层相同的坐标）

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

2 个答案: