时间戳

首页 > 解决方案 > 通过覆盖转发和嗅探事件

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

问题描述

我试图通过跟踪覆盖中的 mousemove 事件在指针周围创建一个注意气泡。然后，所有鼠标事件都应该落到覆盖层下方的 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()似乎没有工作。其他鼠标事件，如click，也被阻止。设置指针事件：无；在覆盖上禁用我正在尝试做的所有事情。

这些尝试也失败了：

        //$(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 单位来调整气泡的大小，我应该如何设置偏移量以使气泡在指针上居中？

标签： javascriptjqueryhtmlcssevents

解决方案

我没有更新或删除问题，而是在此处显示解决方案以进行对比：

$(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 的页面的任何部分。

推荐阅读