阻止所有 javascript 事件触发答案

【问题标题】：Prevent all javascript events from firing阻止所有 javascript 事件触发
【发布时间】：2016-12-08 22:28:36
【问题描述】：

我正在开发像 javascript 元素选择器这样的萤火虫，但无法弄清楚如何阻止所有 JavaScript 事件在单击时触发。 firebug lite 插件 (https://getfirebug.com/firebuglite) 正在做我想要的，但无法弄清楚他们在做什么。任何帮助将不胜感激。

塞纳里奥：

用户选择元素检查器
用户点击元素
onClick、mousedown、mouseup 不应触发

我尝试了以下方法，但没有成功：

function stopEvents(el){

    for(var key in window) {
        if (key.indexOf("on") == 0)
            el.addEventListener(key.substr(2), stop, false);
    }
}

function StopEvent(pE)
{
    stopEvents(pE);

    if (!pE)
     if (window.event)
       pE = window.event;
     else
       return;
  if (pE.cancelBubble != null)
    pE.cancelBubble = true;
  if (pE.stopPropagation)
     pE.stopPropagation();
  if (pE.preventDefault)
     pE.preventDefault();
  if (window.event)
     pE.returnValue = false;
  if (pE.cancel != null)
     pE.cancel = true;
}

编辑：

$('.somediv').on("click", function(e){
     //Stop bubbling and propagation
     StopEvent(e);

     //EDIT: Still not working with this
     e.stopImmediatePropagation();

     //RUN only my code here
     console.log("My code is running still");

     return false;
});

如果有另一个库，例如 YUI 绑定事件到同一个 DOM 元素。它会在我之后触发那里的事件。我似乎无法通过劫持事件来阻止这种情况的发生。

编辑：

我不能使用 disabled 因为我需要能够触发我的事件。如果我执行以下操作，我将无法触发上述事件。我也无法附加父事件，因为 DOM 将停止为该节点触发 Tree 上的所有事件。

$('.somediv').on("mouseover", function(e){
     $(this).attr("disabled", "disabled"); 
});

编辑：

我要禁用的事件在我的脚本运行之前已经创建。这些事件可以是任何 javascript 库，例如 YUI、Dojo、jQuery、JavaScript 等...

【问题讨论】：

您是否尝试返回 false？返回假；最后。
你不能劫持所有事件。但是在document的捕获阶段尝试.stopImmediatePropagation()。
disabled 元素不会触发事件。

标签： javascript

【解决方案1】：

禁用页面上的所有事件非常简单。困难的部分是在需要时恢复它们。

document.body.innerHTML = document.body.innerHTML;

这将通过将 DOM 替换为“原始”副本来有效地删除绑定到 DOM 节点的所有事件。

大多数时候用户甚至不会注意到重绘。

【讨论】：

你是个天才。

【解决方案2】：

如果不拦截实际的事件绑定，你就不能“禁用”所有这些，所以你最终必须得到这样的结果：

(function(prototypes) {
  prototypes.forEach(function(prototype) {
    var eventTracker = {};

    var oldAEL = prototype.addEventListener;
    prototype.addEventListener = function(a,b,c) {
      if (!eventTracker[a]) { eventTracker[a] = true; }
      return oldAEL.call(this, a, function(evt) {
        console.log(a, eventTracker[a]);
        if(eventTracker[a] === true) {
          b(evt);
        }
      },c);
    };

    prototype.toggleEvent = function(name, state) { 
        eventTracker[name] = state;
    }; 
  });   
}([Document.prototype, HTMLElement.prototype, ...]));

示例：http://jsfiddle.net/BYSdP/1/

按钮获得三个点击监听器，但如果点击第二个按钮，“点击”的事件调节器被设置为 false，因此没有任何事件会真正触发最初提供的代码。请注意，这也使调试变得更加困难，因为您将处理程序包装在匿名函数中。

【讨论】：

【解决方案3】：

event.stopImmediatePropagation() 阻止其余的处理程序被执行并阻止 DOM 树冒泡的事件。

例子：

$( "p" ).click(function( event ) {
  event.stopImmediatePropagation();
});

$( "p" ).click(function( event ) {
  // This function won't be executed
  $( this ).css( "background-color", "#f00" );
});

来源：https://api.jquery.com/event.stopimmediatepropagation/

【讨论】：