javascript - preventdefault 不阻止其内部按钮

Question

我无法通过 preventdefault 来阻止操作。如果答案太简单，我深表歉意，但我根本找不到错误。为什么它不阻止进入链接？jsfiddle 下面给出。

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

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

Answer 1

e != event

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

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

---

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

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

Answer 2

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

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

Answer 3

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

<!-- 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 添加的处理程序。现在您必须重新评估两个不同处理程序对相同元素和事件的需求并应用条件。你真的需要这样做吗？

Answer 4

您正在使用 2 个“点击”事件。您最终使用了一次 preventDefault，它在第一次单击事件运行后使用。

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

此外，当然您必须使用相同的参数名称。（函数（事件），以 event.preventDefault 为例）。

Answer 5

如果您将“e”作为事件传递给函数，那么您应该只为您传递的“e”而不是“event”阻止默认操作。

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

jQuery preventDefault() 方法：http ://api.jquery.com/event.preventDefault/