防止多个点击事件触发 JQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12708691/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent multiple click events firing JQuery
提问by Liam
Here's the scenario, my content is loaded asynchronously based on a class. So if I have a link with the class ajaxLink it fires as below:
这是场景，我的内容是基于类异步加载的。因此，如果我有一个与 ajaxLink 类的链接，它会如下触发：
$('a.ajaxLink').click(function (e) {
e.preventDefault();
var container = $(this).parents('div.fullBottomContent');
var href = $(this).attr('href');
container.fadeOut('fast', function () {
$.ajax({
url: href,
dataType: "html",
type: "GET",
success: function (data) {
container.html(data);
BindEventHandlers();
container.fadeIn();
$.validator.unobtrusive.parse('form');
},
error: function () {
alert('An error has occurred');
}
});
});
});
All lovely. Now in one instance I want to display a warning to the user to confirmthat they want to load the page and loose all their changes so I've written this:
都很可爱。现在，在一个实例中，我想向用户显示警告，confirm提示他们要加载页面并取消所有更改，因此我写了以下内容：
$('a.addANewHotel').click(function (e) {
if (!confirm('Adding a new hotel will loose any unsaved changes, continue?')) {
e.stopPropagation();
}
});
now I've tried return false, e.preventDefault()and e.stopPropagation();but no matter what the first method is always fired? How can I prevent the extra click event from firing? Is this an order of events thing?
现在我已经尝试过return false，e.preventDefault()并且e.stopPropagation();但是不管什么第一种方法是始终点火？如何防止触发额外的点击事件？这是一个事件的顺序吗？
Don't see how this is relevant but my HTML is:
不知道这是如何相关的，但我的 HTML 是：
<a style="" href="/CMS/CreateANewHotel?regionID=3&destinationID=1&countryName=Australia" class="button wideBorderlessButton ajaxLink addANewHotel">Add a new hotel</a>
回答by bstakes
Have you tried: event.stopImmediatePropagation?
你有没有试过：event.stopImmediatePropagation？
I believe it is what you are looking for:
我相信这就是你要找的：
http://api.jquery.com/event.stopImmediatePropagation/
http://api.jquery.com/event.stopImmediatePropagation/
$('a.addANewHotel').click(function (e) {
if (!confirm('Adding a new hotel will loose any unsaved changes, continue?')) {
e.stopImmediatePropagation();
e.preventDefault();
}
});
回答by Asciiom
stopPropagationwould stop the event from bubbling to parent elements, not prevent other click handlers on the same element from firing. So your solution won't work.
stopPropagation会阻止事件冒泡到父元素，而不是阻止同一元素上的其他点击处理程序触发。所以你的解决方案不起作用。
You could do it like this for example:
你可以这样做，例如：
$('a.ajaxLink').click(function (e) {
e.preventDefault();
if($(this).hasClass("a.addANewHotel") &&
!confirm('Adding a new hotel will loose any unsaved changes, continue?')){
return false;
}
var container = $(this).parents('div.fullBottomContent');
var href = $(this).attr('href');
container.fadeOut('fast', function () {
$.ajax({
url: href,
dataType: "html",
type: "GET",
success: function (data) {
container.html(data);
BindEventHandlers();
container.fadeIn();
$.validator.unobtrusive.parse('form');
},
error: function () {
alert('An error has occurred');
}
});
});
});
If you'd have a lot of different types of links you should put the common code in a function and bind the handlers using the differentiating class. These handlers can then call the common code when appropriate.
如果您有很多不同类型的链接，您应该将公共代码放在一个函数中，并使用差异化类绑定处理程序。然后，这些处理程序可以在适当的时候调用公共代码。
