[英]How to make a Javascript event handler to execute first?
我有一个页面,它使用 jQuery 和欧芹插件进行表单验证和提交。 下面是表单的事件处理程序,
$('#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();
来阻止事件的流动event.stopImmediatePropagation();
因此,不会执行第二个事件处理程序。 有没有办法让我的纯 javascript 处理程序首先执行? 我遇到了这个jQuery 解决方案来绑定事件处理程序。 但我需要纯 javascript 解决方案。 非常感谢任何帮助。
更新:这是针对我的问题的JSFiddle 。
唯一的方法是确保在 jQuery 处理程序之前添加addEventListener
处理程序。 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>
是的,你可以这样做。 使用 Boolean true 作为第三个参数来运行 addEventListener ,如下所示。 它在事件的捕获阶段绑定处理程序。 有关事件的捕获和冒泡阶段的更多信息, 请参阅
document.getElementById("formid").addEventListener("submit",function(e){
//Some code to be executed after form submit
}, true);
希望这会有所帮助
第一种方式
我不知道这是否可行,请尝试刷新您的传播事件:
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();
执行后再次停止传播event.stopPropagation();
这次再次给您的处理程序
第二种方式
//监听器
var stoped = false;
if(stoped){
event.stopPropagation();
}
//处理程序
var stoped = true
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.