preventdefault不阻止其内部按钮

preventdefault not preventing when its inside button

本文关键字：内部 按钮 preventdefault      更新时间：2023-09-26

我无法将preventdefault设置为阻止操作。如果答案太简单，我很抱歉，但我就是找不到错误。为什么它不阻止进入链接？jsfiddle如下。

http://jsfiddle.net/zwY5p/34/

$('#theForm').click(function(e) {
    event.preventDefault();
    alert('FORM!');
});

e != event

$('#theForm').click(function(event) {
    event.preventDefault();
    alert('FORM!');
});

传递给处理程序函数的参数是您需要在上执行preventDefault的参数。在代码中，您传递e，但在event上调用preventDefault。

preventDefault阻止默认浏览器操作它不会取消内联JavaScript，因为它首先运行。如果你必须覆盖它，只需删除它（不需要事件侦听器）：

$('#theForm').removeAttr('onclick').

您的事件参数名称e和您使用的变量event不同，

$('#theForm').click(function(event) {
    event.preventDefault();
    alert('FORM!');
});

除了其他答案中指出的错误之外，还有另一个小问题，特别是在您的标记声明中：

<!-- Use either the closing tag or the slash (/) in the opening tag -->      
<button id="theForm" onclick="location.href='http://www.example.com'" /> 
go to google
</button>

在本主题中，有两个不同的处理程序附加到button元素，它们都在处理click事件，但它们仍然是不同的、独立的。jQuery不会知道标记中定义的处理程序：

var btn = document.getElementById('theForm');
jQuery._data( btn, "events" );

将返回一个带有单个元素的数组，该元素是通过jQuery添加的处理程序。现在，您必须重新评估对同一元素和事件的两个不同处理程序的需求，并应用条件。你真的需要这样做吗？

您使用的是2个"点击"事件。您最终使用了一次preventDefault，并且在第一次单击事件运行后使用。

如果您将按钮设置为href，那么您的preventDefault将起作用。这也将更有意义，因为JS将与HTML标记分离。

当然，您也必须使用相同的参数名称。（function（event），例如event.preventDefault）。

如果将"e"作为事件传递给函数，则应仅针对已传递的"e"而不针对"event"阻止默认操作。

$('#theForm').click(function(e) {
    e.preventDefault();
    alert('FORM!');
});

jQuery preventDefault（）方法：http://api.jquery.com/event.preventDefault/

相关文章：