Question

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

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

我有另一个纯JavaScript侦听器函数要在提交表单时执行。以下是代码段

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

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

现在问题是，欧芹正在使用event.stopImmediatePropagation();

停止事件流

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

更新我的问题是JSFiddle。

Answer 1

唯一的方法是确保在{jQuery处理程序之前添加{strong> 处理程序。 jQuery将使用addEventListener为事件添加其处理程序（此时它将为该元素上的该事件的所有处理程序使用该单个处理程序），并且因为添加了addEventListener的处理程序在为了添加它们，你的非jQuery处理程序将首先由浏览器执行。

示例：

＆＃13;
＆＃13;
addEventListener
＆＃13;
// 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);
＆＃13;
＆＃13;
＆＃13;

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?

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

3 个答案: