javascript 函数中的 jQuery preventDefault
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13502996/
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
jQuery preventDefault in a function
提问by Alan Shortis
I have used preventDefaulton an element event like this:
我preventDefault在这样的元素事件上使用过：
$('#element').click(function (e) {
do stuff...
});
Now, I have a function that takes an argument already in which I would like to use preventDefaultbut I'm not sure how:
现在，我有一个函数，它已经接受了一个我想在其中使用的参数，preventDefault但我不确定如何：
<a href="#services" id="services_link" class="services" onclick="sectionScroll('services')">Services</a>
function sectionScroll(id) {
history.pushState(null, null, '#' + id);
$('html, body').animate({
scrollTop: $("#" + id).offset().top
}, 1000);
}
I tried using return false instead but this caused some flickering when the link was clicked.
我尝试使用 return false 代替，但这会在单击链接时导致一些闪烁。
How can I add preventDefaultto the above function?
如何添加preventDefault到上述功能？
EDIT
编辑
My original question was around using preventDefault in a function that has other arguments. I didn't need to use inline javascript in the end (it was looking like there was no way to avoid it), so this is what I used. I think it's quite tidy:
我最初的问题是在具有其他参数的函数中使用 preventDefault 。最后我不需要使用内联 javascript（看起来没有办法避免它），所以这就是我使用的。我认为它很整洁：
<a href="#services" class="menu-link">Services</a>
$('.menu-link').click(function (e) {
e.preventDefault();
var location = $(this).attr('href');
history.pushState(null, null, location)
$('html, body').animate({
scrollTop: $(location).offset().top
}, 1000);
});
回答by Korikulum
Well, if you really want to use inline event handlers (wouldn't recommend it though), try this:
好吧，如果你真的想使用内联事件处理程序（虽然不推荐它），试试这个：
<a href="#services" id="services_link" class="services"
onclick="sectionScroll('services', event)">Services</a>
<script type="text/javascript">
function sectionScroll(id, e) {
e.preventDefault();
history.pushState(null, null, '#' + id);
$('html, body').animate({
scrollTop: $("#" + id).offset().top
}, 1000);
}
</script>
回答by Aamir
You can use jQuery, like you are with the other example, to handle the click event:
您可以像使用其他示例一样使用 jQuery 来处理单击事件：
<a href="#services" id="services_link" class="services">Services</a>
$('#services_link').click(function (e) {
var id = "services";
history.pushState(null, null, '#' + id);
$('html, body').animate({
scrollTop: $("#" + id).offset().top
}, 1000);
e.preventDefault();
}
This will then allow you to call preventDefaulton the event.
这将允许您调用preventDefault该事件。
This is also much better since you will no longer be using inline Javascript and your event logic can all be handled using one method (i.e. jQuery) rather than some of it being in jQuery and some inline.
这也好得多，因为您将不再使用内联 Javascript 并且您的事件逻辑都可以使用一种方法（即 jQuery）处理，而不是其中一些在 jQuery 中和一些内联。
I would suggest reading "Why Should I Avoid Inline Scripting?" to get an idea of why you should try to avoid inline scripting.
我建议阅读“为什么我应该避免内联脚本？”以了解为什么应该尝试避免内联脚本。
回答by Sushanth --
You can assign the event Handler in jsitself instead of HTML
您可以在js本身而不是HTML 中分配事件处理程序
<a href="#services" id="services_link" class="services"
data-id="services">Services</a>
/
/
$('#services_link').on('click', function(e){
e.preventDefault();
// data-id is a HTML5 data attribute
var id = $(this).data('id');
history.pushState(null, null, '#' + id);
$('html, body').animate({
scrollTop: $("#" + id).offset().top
}, 1000);
});
回答by Kevin Boucher
You could just return false from the event handler:
您可以从事件处理程序返回 false：
<a href="#services" id="services_link" class="services" onclick="return sectionScroll('services')">Services</a>
function sectionScroll(id) {
history.pushState(null, null, '#' + id);
$('html, body').animate({
scrollTop: $("#" + id).offset().top
}, 1000);
return false; // note the addition of return keyword in onclick attribute above
}
回答by Michael Mammoliti
If .on("click") adds "overflow:hidden" to the body or html, the page scrolls anyway to the top, even if you use e.preventDefalt() inside the callback.
如果 .on("click") 将 "overflow:hidden" 添加到正文或 html，则页面无论如何都会滚动到顶部，即使您在回调中使用 e.preventDefalt() 也是如此。
