javascript - 如何打破 event.stopImmediatePropagation

Question

我有这样的代码:

<td>
 <span class='ui-button-next'>NEXT</span>
</td>

此应用程序包含一个库，不允许对其进行编辑。单击“ui-button-next”时，它们会调用 event.stopImmediatePropagation() 来停止某些操作。

我想在用户点击这个“跨度”而不触及那个库时调用一个函数。

我的自定义代码是这样的:

$(".ui-button-next").click(function(){
});

$(".ui-button-next").bind("click",function(){
});

$(".ui-button-next").on("click",function(){
});

由于库上的 event.stopImmediatePropagation() 而无法正常工作。任何解决方法？

Answer 1

您可以访问底层事件列表(数组)并首先插入新的点击处理程序，它会正常触发，但请注意执行顺序在您的情况下应该不是问题:

//this is the inner handler
$('.ui-button-next').click(function(e){
   e.stopImmediatePropagation();     
});
//this is the handler of your own
$('.ui-button-next').click(function(e){       
    alert('OK');
});

//get click handlers list
var clicks = $._data($('.ui-button-next')[0], 'events')['click'];
//get the last added handler (which is your own handler) and put it at the beginning
clicks.unshift(clicks.pop());

Demo.

更新:为了保持执行顺序(首先执行默认处理程序，之后执行所有额外添加的处理程序)，我认为您必须通过删除所有 e.stopImmediatePropagation() 方法，这里我们要用到eval() 方法。请注意，在这种情况下使用该方法是完全可以的。

//get click handlers list
var clicks = $._data($('.ui-button-next')[0], 'events')['click'];
//remove the e.stopImmediatePropagation() in each handler
$.each(clicks, function(i,e){
  var handlerText = e.handler.toString()
                     .replace(/e.stopImmediatePropagation\(\)/g,'');    
  eval("e.handler = " + handlerText);
});

Updated demo.