javascript - jQuery 鼠标事件阻止默认传播

Question

我在点击任何链接时遇到全身叠加效果问题。

想要的效果是:

1. 当页面的任何链接被“按下”(鼠标按下或触摸启动)时，整个正文的顶部会出现一个图像叠加层(隐藏页面的完整内容)
2. 当链接(或应该)“释放”(鼠标松开或触摸结束)时，覆盖层应该消失，并且原始点击的链接目标应该发生(例如，必须遵循“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);

});

我做了一个JS Fiddle以便更清楚地显示它。

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

Answer 1

该问题是由 jQuery 执行方式引起的 .click() 。它是 jQuery 的 trigger('click') 的快捷方式方法，这就是documentation说:

Although .trigger() simulates an event activation, complete with a synthesized event object, it does not perfectly replicate a naturally-occurring event.

解决方案是调用click DOM 元素本身的方法。看起来 MDN documentation宣布同样的限制适用于该方法:

The HTMLElement.click() method simulates a mouse click on an element.

However, the click() method will not initiate navigation on an <a> element.

...但在当前版本的 Firefox、Chrome 和 Edge 上尝试此操作时，DOM click方法确实启动 <a>导航(当 href 具有 http URL 时也是如此)。

所以，改变这个:

overlay_triggered = $target;

至:

overlay_triggered = evt.target;

并更改此设置(无论如何，这都太过分了):

$(overlay_triggered).click();

至:

overlay_triggered.click();

请参阅updated jsfiddle .