javascript - 停止传播不起作用

Question

我有下面的 JQuery eventhandler。我想停止网页上的所有导航。

$(document).click(function(event) {
            event.stopPropagation();
            event.preventDefault();
            event.cancelBubble = true;
            event.stopImmediatePropagation();
            $(document).css('border-color','');
            $(document).css('background-color',''); 
            $(event.target).css('border-color','yellow');
            $(event.target).css('background-color','#6BFF70');
            return false;
    });

当我在 Facebook 登录页面上使用它时，它会停止所有导航。但在 Google 主页中，“手气不错”按钮仍会导航到下一页。我该如何避免？

顺便说一下，我正在使用 JavaFX 浏览器。它类似于 Safari 浏览器。

Answer 1

如果我加载 Google 搜索页面，并在控制台执行:

document.body.addEventListener(
  "click", 
  function (ev) { ev.stopPropagation(); ev.preventDefault(); },
  true);

然后我不能再点击“手气不错”按钮了。关键是使用第三个参数并将其设置为true。以下是 MDN [所说] 的内容:

useCapture Optional

If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree.

(强调已添加。)

您尝试执行的操作无效，因为您的事件处理程序位于 document 上，因此将在文档的子级上的任何事件处理程序之后被调用。所以你的处理程序无法阻止任何事情。

将 useCapture 设置为 true，您可以在事件有机会传递给子元素之前对其进行操作。我不知道有什么方法可以让 jQuery 的事件处理程序以您使用 useCapture 获得的方式工作。巴马尔的answer here说你不能使用 jQuery 来设置这样的处理程序。我倾向于相信他。