Javascript jQuery鼠标事件阻止默认传播

我有一个问题，全身覆盖效果时，点击任何链接

想要达到的效果是：

当页面的任何链接被“按下”（mousedown或touchstart）时，一个图像覆盖显示在整个页面的顶部（隐藏页面的完整内容）

当链接被（或应该被）“释放”（mouseup或touchend）时，覆盖应该消失，原始点击的链接目标应该出现（例如，必须遵循“href”属性）

第一部分还可以：我添加了一个事件处理程序，用于侦听每个链接上的“mousedown touchstart”事件。第二部分更为复杂，因为覆盖层不会触发链接的“释放”操作（覆盖层覆盖有链接的内容）。因此，我在整个文档上附加了一个“mousedown touchend”事件处理程序，它可以工作，但单击链接的默认行为（例如转到其“href”属性）从未触发：(

这是我的JS：

$(document).ready(function(){

    // the full-page overlay selector
    var $overlay = $('.body-overlay');

    // a flag to keep a trace of clicked element
    var overlay_triggered = false;

    // the "mousedown" event handler
    function show_overlay(evt)
    {
        var $target = $(evt.target);
        if (overlay_triggered === false) {
            $overlay.show();
            overlay_triggered = $target;
            $(document).on('mouseup touchend', hide_overlay);
        }
        return true;
    }

    // the "mouseup" event handler
    function hide_overlay(evt)
    {
        if (overlay_triggered !== false) {
            $(document).off('mouseup touchend', hide_overlay);
            $overlay.hide();

            // !!! - here I try to trigger a classic click but it never works
            $(overlay_triggered).click();

            overlay_triggered = false;
        }
        return true;
    }

    // attachment of the mousedown handler on all links
    $(document).on('mousedown touchstart', 'a', show_overlay);

});

我做了一个实验，以便更清楚地展示它

---

有人知道这里有什么错误吗？我的逻辑是错误的吗？

我不太清楚为什么这不起作用，但我通过更改

$（覆盖触发）。单击（）

到

window.location=$（覆盖触发）。attr（“href”）；

我不确定为什么这不起作用，但我通过更改

$（overlay_triggered）。单击（）；

到

window.location=$（overlay_triggered.attr（“href”）；

我已经稍微修改了你的JS部分，现在一切都好了 我所做的是将目标的href值保存在一个变量中（我将目标的href值存储在下面代码中的'href'变量中），然后在'hide_overlay'函数中的“window.location=href；”中执行此操作

<script>
    $(document).ready(function(){

        // the full-page overlay selector
        var $overlay = $('.body-overlay');

        // a flag to keep a trace of clicked element
        var overlay_triggered = false;
        var href = false;

        // the "mousedown" event handler
        function show_overlay(evt)
        {
            var $target = $(evt.target);
            href = evt.target.href;

            if (overlay_triggered === false) {
                $overlay.show();
                overlay_triggered = $target;
                $(document).on('mouseup touchend', hide_overlay);
            }
            return true;
        }

        // the "mouseup" event handler
        function hide_overlay(evt)
        {
            if (overlay_triggered !== false) {
                $(document).off('mouseup touchend', hide_overlay);
                $overlay.hide();

                // !!! - here I try to trigger a classic click but it never works
                if( href ) {
                    window.location = href;
                }
                overlay_triggered = false;
            }
            return true;
        }

        // attachment of the mousedown handler on all links
        $(document).on('mousedown touchstart', 'a', show_overlay);

    });

</script>

$（文档）.ready（函数（）{
//全页覆盖选择器
var$overlay=$（'.body overlay'）；
//保留已单击元素跟踪的标志
var overlay_triggered=false；
var href=false；
//“mousedown”事件处理程序
功能显示覆盖（evt）
{
变量$target=$（evt.target）；
href=evt.target.href；
如果（叠加触发===假）{
$overlay.show（）；
叠加触发=$target；
$（文档）.on（'mouseup touchend'，hide_overlay）；
}
返回true；
}
//“mouseup”事件处理程序
函数隐藏覆盖（evt）
{
如果（已触发叠加！==false）{
$（document）.off（'mouseup touchend'，hide_overlay）；
$overlay.hide（）；
//！！！-在这里，我试图触发一个经典的点击，但它从来没有工作
如果（href）{
window.location=href；
}
叠加触发=假；
}
返回true；
}
//在所有链接上附加mousedown处理程序
$（文档）.on（'mousedown touchstart'，'a'，show\u overlay）；
});

我稍微修改了你的JS部分，现在一切都好了 我所做的是将目标的href值保存在一个变量中（我将目标的href值存储在下面代码中的'href'变量中），然后在'hide_overlay'函数中的“window.location=href；”中执行此操作

<script>
    $(document).ready(function(){

        // the full-page overlay selector
        var $overlay = $('.body-overlay');

        // a flag to keep a trace of clicked element
        var overlay_triggered = false;
        var href = false;

        // the "mousedown" event handler
        function show_overlay(evt)
        {
            var $target = $(evt.target);
            href = evt.target.href;

            if (overlay_triggered === false) {
                $overlay.show();
                overlay_triggered = $target;
                $(document).on('mouseup touchend', hide_overlay);
            }
            return true;
        }

        // the "mouseup" event handler
        function hide_overlay(evt)
        {
            if (overlay_triggered !== false) {
                $(document).off('mouseup touchend', hide_overlay);
                $overlay.hide();

                // !!! - here I try to trigger a classic click but it never works
                if( href ) {
                    window.location = href;
                }
                overlay_triggered = false;
            }
            return true;
        }

        // attachment of the mousedown handler on all links
        $(document).on('mousedown touchstart', 'a', show_overlay);

    });

</script>

$（文档）.ready（函数（）{
//全页覆盖选择器
var$overlay=$（'.body overlay'）；
//保留已单击元素跟踪的标志
var overlay_triggered=false；
var href=false；
//“mousedown”事件处理程序
功能显示覆盖（evt）
{
变量$target=$（evt.target）；
href=evt.target.href；
如果（叠加触发===假）{
$overlay.show（）；
叠加触发=$target；
$（文档）.on（'mouseup touchend'，hide_overlay）；
}
返回true；
}
//“mouseup”事件处理程序
函数隐藏覆盖（evt）
{
如果（已触发叠加！==false）{
$（document）.off（'mouseup touchend'，hide_overlay）；
$overlay.hide（）；
//！！！-在这里，我试图触发一个经典的点击，但它从来没有工作
如果（href）{
window.location=href；
}
叠加触发=假；
}
返回true；
}
//在所有链接上附加mousedown处理程序
$（文档）.on（'mousedown touchstart'，'a'，show\u overlay）；
});

问题是由jQuery执行

的方式引起的。单击（）

。它是jQuery的

触发器（“单击”）的快捷方式。

方法是这样说的：

尽管

.trigger（）

模拟事件激活，并使用合成的事件对象完成，但它并不能完全复制自然发生的事件

解决方案是在DOM元素本身上调用

click

方法。似乎声明了同样的限制也适用于该方法：

HTMLElement.click（）

方法模拟鼠标单击元素

---

但是，

click（）

方法不会在

上启动导航问题是由jQuery执行
.click（）
的方式引起的。它是jQuery的
触发器（'click'）
方法的快捷方式，如下所示：

尽管
.trigger（）
模拟事件激活，并使用合成的事件对象完成，但它并不能完全复制自然发生的事件

解决方案是在DOM元素本身上调用
click
方法。似乎声明了同样的限制也适用于该方法：

HTMLElement.click（）
方法模拟鼠标单击元素

然而，代码
overlay_triggered = evt.target;

$(overlay_triggered).click();

overlay_triggered.click();