4

我正在研究像 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 等...

4

3 回答 3

4

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

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

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

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

于 2016-02-13T21:55:25.090 回答
3

在不拦截实际事件绑定的情况下，您无法“禁用”所有这些，因此您最终必须得到如下结果：

(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，因此任何事件都不会真正触发最初提供的代码。请注意，这也使调试变得更加困难，因为您将处理程序包装在匿名函数中。

于 2013-10-01T00:37:39.997 回答
0

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/

于 2016-12-08T14:28:36.457 回答