如何使 Javascript 事件处理程序首先执行？

Question

我有一个使用 jQuery & parsley 插件进行表单验证和提交的页面。下面是表单的事件处理程序，

$('#formid').parsley().on('form:submit', function(event) {
    //handle form submit
});

我有另一个纯 JavaScript 侦听器函数要在提交表单时执行。下面是代码sn-p，

document.getElementById("formid").addEventListener("submit",function(e){
   //Some code to be executed after form submit
});

我要求不要将 jQuery 用于上述功能。

现在的问题是，parsley 正在使用 event.stopImmediatePropagation(); 阻止事件流向下游

因此，第二个事件处理程序没有得到执行。有没有办法让我的纯 javascript 处理程序首先执行？我遇到了this jQuery 解决方案来绑定事件处理程序。但我需要纯 JavaScript 解决方案。任何帮助是极大的赞赏。

更新： 这是JSFiddle 解决我的问题。

Answer 1

唯一的方法是确保将addEventListener 处理程序添加到 jQuery 处理程序之前。 jQuery 将使用addEventListener 为事件添加它的处理程序（此时它将为该元素上的该事件的所有处理程序使用单个处理程序），并且由于使用addEventListener 添加的处理程序按照它们添加的顺序进行处理，您的非 jQuery 处理程序将首先由浏览器执行。

例子：

// The first addEventListener handler -- does get called
document.getElementById("the-button").addEventListener("click", function () {
    console.log("first addEventListener handler called");
}, false);

// The jQuery handler that stops immediate propagation
$("#the-button").on("click", function (e) {
    console.log("jQuery handler called");
    e.stopImmediatePropagation();
});

// The second addEventListener handler -- doesn't get called
document.getElementById("the-button").addEventListener("click", function () {
    console.log("this message won't be output");
}, false);

<input type="button" id="the-button" value="Click Me">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

是的，你可以这样做。使用 Boolean true 作为第三个参数来执行 addEventListener 函数，如下所示。它在事件的捕获阶段绑定处理程序。更多关于事件的捕获和冒泡阶段see

document.getElementById("formid").addEventListener("submit",function(e){
   //Some code to be executed after form submit
}, true);

Answer 3

希望这会有所帮助

第一种方式

我不知道这是否可行，请尝试刷新您的传播事件：

var refEvent = event.originalEvent;
refEvent.cancelBubble = false;
refEvent.defaultPrevented = false;
refEvent.returnValue = true;
refEvent.timeStamp = (new Date()).getTime();

if (event.target.dispatchEvent){
    event.target.dispatchEvent(refEvent);
} else if (event.target.fireEvent) {
    event.target.fireEvent(refEvent);
}

然后你可以在你的处理程序执行后再次停止传播，这次再次添加event.stopPropagation();到你的处理程序

第二种方式

//监听器

var stoped = false;
if(stoped){
    event.stopPropagation();
}

//处理程序

var stoped = true

来源：How to undo event.stopPropagation in jQuery?