检测 mousemove 但让点击事件通过答案

【问题标题】：Detect mousemove but let click events pass through检测 mousemove 但让点击事件通过
【发布时间】：2015-06-26 20:18:42
【问题描述】：

我正在处理一个叠加层。我需要单击以传递到下面的 HTML 元素，为此我可以使用“指针事件：无”。但是，我还需要覆盖来检测 mousemove 事件，以便我可以在鼠标光标所在的位置上绘制一个巨大的十字准线。问题在于将“pointer-events”设置为“none”会阻止那些 mousemove 事件触发。

建议？

【问题讨论】：

请贴一些相关代码！！

标签： javascript jquery click

【解决方案1】：

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

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

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

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

【讨论】：

我还想出了一个解决方案，即监听 mousedown 事件，然后隐藏覆盖层，从而允许下面的层监听 mouseup 事件。

【解决方案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/

【讨论】：

问题不是鼠标光标，而是在整个 DIV 上画了一个十字准线 - 请参阅 Miro 的示例。