javascript - 通过覆盖转发和嗅探事件

Question

我试图通过在叠加层中跟踪鼠标移动事件来在指针周围创建一个注意力气泡。然后，所有鼠标事件都应落入叠加层下方的 DOM 元素。

$(document).ready( function () {

    let idle_after = 0;

    setInterval( function () {
        if (Date.now() > idle_after) {
            $('#dot').hide();
        }
    }, 1000 );

    $('#overlay').on( 'mousemove', function (evt) {
        let x = evt.clientX, y = evt.clientY;
        $('#overlay').hide();
        let o = document.elementFromPoint( x, y );
        console.log( o.nodeName );
        $(document).trigger( 'mousemove', evt );    //  <====  this is not working
        $('#overlay').show();
        $('#dot').css( { left: evt.clientX - 20, top: evt.clientY - 20 } ).show();
        idle_after = Date.now() + 2000;
    });

});

#dot 是气泡。 console.log() 消息在叠加层下方显示了正确的对象，并且气泡按预期移动。 trigger() 似乎不起作用。其他鼠标事件，如点击，也会被阻止。在叠加层上设置 pointer-events: none; 会禁用我尝试执行的所有操作。

这些尝试也失败了:

        //$(document).trigger( 'mousemove', new Event( 'mousemove', { pageX: x, pageY: y } ) );
        //$(document).trigger( evt );
        //o.dispatchEvent( evt );
        //o.dispatchEvent( new Event( 'mousemove', { pageX: x, pageY: y } ) );

叠加层和气泡 css:

            #overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1000;
            }
            #dot {
                position: absolute;
                width: 10vh;
                height: 10vh;
                border: 1px solid red;
                border-radius: 6vh;
                background: rgba( 0, 0, 0, 0.15 );
            }

顺便说一句，如果我使用 vh 单位来调整气泡的大小，我应该如何设置偏移量以使气泡在指针上居中？

Answer 1

我没有更新或删除问题，而是在此处展示解决方案以供对比:

$(document).ready( function () {

    let idle_after = 0;

    setInterval( function () {
        if (Date.now() > idle_after) $('#dot').hide();
    }, 1000 );

    $(document).on( 'mousemove', function (evt) {
        let x = evt.pageX, y = evt.pageY;
        $('#dot').css( { left: x - 20, top: y - 20 } ).show();
        idle_after = Date.now() + 2000;
    });

});

关键是要捕获文档(而不是叠加层)上的mousemove事件，然后，是的，设置pointer-events: none;覆盖 CSS。

我认为出于安全原因，这似乎不适用于具有 IFRAME 的页面的任何部分。