我有一个页面使用 jQuery 和 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 来实现上述功能。
现在的问题是,parsley 正在使用 event.stopImmediatePropagation();
因此,第二个事件处理程序不会被执行。有没有办法让我的纯 javascript 处理程序首先执行?我遇到了this bindUp 事件处理程序的 jQuery 解决方案。但我需要纯 javascript 解决方案。任何帮助是极大的赞赏。
更新: 这是 JSFiddle对于我的问题。
最佳答案
唯一的方法是确保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>
关于javascript - 如何使 Javascript 事件处理程序先执行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39180420/