javascript event.preventDefault() 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9425146/
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
event.preventDefault() not working
提问by ideAvi
i have this line of code in my view using the Telerik Grid:
我使用 Telerik Grid 在我的视图中有这行代码：
columns.Bound(o => o.URI).Width(10).Sortable(false)
.ClientTemplate("<A class='btnGrid' id=source<#= ID #> onclick=GridSelection.addItem('<#= ID #>') >Add</A>").Title("").Width(50);
the GridSelection addItem and disableSelected functions' JS codes:
GridSelection addItem 和 disableSelected 函数的 JS 代码：
GridSelection = {
addItem: function (value) {
var anchorOption = $("a[id=source" + value + "]");
anchorOption.click(function (e) { // variable name changed from "event"
e.preventDefault();
return false; // as suggested by mr. Hamdi
});
anchorOption.fadeTo("slow", .5);
GridSelection.disableSelected(anchorOption, true);
var data = $("#GridSource").data('tGrid').data;
var selectedObject;
for (var item in data) {
if (data[item].ID == value) {
selectedObject = data[item];
break;
}
}
var grid = $("#GridSelected").data('tGrid');
var newData = $("#GridSelected").data('tGrid').dataSource._data;
newData.push(selectedObject);
grid.dataBind(newData);
grid.sort("");
anchorOption.fadeTo("slow", .5);
},
disableSelected: function (element, disable) {
//false on IEs 6, 7 and 8
if (!$.support.leadingWhitespace) {
if (disable) {
$(element).attr('disabled', 'disabled');
} else {
$(element).removeAttr('disabled');
}
}
},
// other GridSelection subfunctions here...
As I run the MVC3 web app in IE, it runs well because of the GridSelection.disableSelected function, but in Chromeand Mozilla Firefox, the event.preventDefault();doesn't work. The anchor link still adds the data item even after the user has already added it there.
当我在 IE 中运行 MVC3 Web 应用程序时，它运行良好，因为 GridSelection.disableSelected 函数，但在Chrome和Mozilla Firefox 中，event.preventDefault();它不起作用。即使用户已经在那里添加了数据项，锚链接仍然会添加数据项。
Is it OK having the preventDefaultmethod inside the GridSelection.addItemfunction that was being prevented?
可以在被阻止preventDefault的GridSelection.addItem函数内部使用方法吗？
Which attribute is being prevented by the preventDefault, is it the hrefor is it the onclick?
哪个属性被阻止preventDefault，是href还是onclick？
What wrong with this? How can I fix this bug? Anyone who can help?
这有什么问题？我该如何修复这个错误？任何人都可以提供帮助？
回答by nnnnnn
The markup for your link has an inline click handler and no href:
您的链接的标记有一个内联点击处理程序，没有href：
<A class='btnGrid' id=source<#= ID #> onclick=GridSelection.verify('<#= ID #>') >Add</A>
If it is the GridSelection.verify()that you're trying to prevent you should note that:
如果它是GridSelection.verify()您试图阻止的，则应注意：
- The inline click handler is probably being called beforeyour other event handler which means it is too late to cancel it from your other handler, and in any case
e.preventDefault()doesn't stop other handlers from running, it stops the default action for the event which for a link is to navigate to the url specified in thehrefattribute. And you don't specify anhref.
- 内联点击处理程序可能在您的其他事件处理程序之前被调用，这意味着从您的其他处理程序中取消它为时已晚，无论如何
e.preventDefault()不会停止其他处理程序的运行，它会停止事件的默认操作，对于链接来说，该操作是导航到href属性中指定的 url 。而且您没有指定href.
If you want to have multiple handlers for the same event on the same element you should assign them all with jQuery in the order you want them to be called, and then use the event.stopImmediatePropagation()methodwithin one of the handlers if you want to stop the rest of them from running.
如果您想在同一个元素上为同一个事件设置多个处理程序，您应该按照您希望调用它们的顺序使用 jQuery为它们分配所有处理程序，然后如果您想停止其余的处理程序，则在其中一个处理程序中使用该event.stopImmediatePropagation()方法他们从跑。
I don't know how to fit that within the code you've shown given that you don't show part of the code you want to prevent, but the general principle is:
鉴于您没有显示要阻止的部分代码，我不知道如何将其放入您显示的代码中，但一般原则是：
<a id="myLink" href="someURL">My link</a>
<script>
$("#myLink").click(function(e) {
// some processing
if (someCondition)
e.stopImmediatePropagation();
// some other processing
});
$("#myLink").click(function(e) {
// some processing
});
</script>
Having said all that, if the .verify()function calls your .addItem()function and it is your intention to prevent futureclick events from working on the same link because the first click should verify/add and then you don't want to be able to add again, then within your .addItem()function do something like this:
话虽如此，如果该.verify()函数调用您的.addItem()函数，并且您打算阻止未来的点击事件在同一链接上工作，因为第一次点击应该验证/添加，然后您不想再次添加，那么在你的.addItem()函数中做这样的事情：
anchorOption.removeAttr("onclick");
// or
anchorOption[0].onclick = null;
回答by Hamdi
Have you tried adding return false;instead of event.preventDefault();
你有没有试过添加return false;而不是event.preventDefault();
回答by ShankarSangoli
If the anchor has an iduse the id selector instead of using it as attribute selector.
如果锚有一个id使用 id 选择器而不是将其用作属性选择器。
Change
改变
$("a[id=source" + value + "]")
To
到
$("#source" + value)
I am not saying this is the issue but you can try changing this.
我并不是说这是问题所在，但您可以尝试更改它。
Update:
更新：
event.preventDefault()stops the browser to follow the link set into hrefattribute of anchor element. It will not prevent or stop the clickevent.
event.preventDefault()停止浏览器跟随设置为href锚元素属性的链接。它不会阻止或停止click事件。
回答by Mike L.
Have you tried renaming the event variable? call me crazy but I seem to recall having issues just try function(e) {e.preventDefault();}and see what happens
您是否尝试过重命名事件变量？说我疯了，但我似乎记得有问题只是尝试function(e) {e.preventDefault();}看看会发生什么
