Question

我是jquery的新手，看到一段代码带有一些奇怪的代码，具有一个方法的功能，即“preventDefault”。好吧，为了测试，我创建了一个测试页面并在其中创建了两个带有“preventDefault”的函数。

我对同一主题有两个问题，希望你能回答我。

$(document).ready( function( ) {
    $('a').click( function( event ) {//Func 1
        event.preventDefault( );
    });

    $("#ok").click( function( event ) {//Func 2
        event.preventDefault( );
        alert("Wut");
        //...
    });
});

1-为什么在第二个函数中，即使我发表评论“event.preventDefault（）;”也会运行“alert（）”和第一个功能不一样吗？如果我评论“event.preventDefault（）;”在第一个函数中，链接不起作用！我发现它很奇怪，因为无论方法“event.preventDefault（）;”无论是否在第二个功能中评论，“警报”的工作方式相同。我想甚至在“警报”之后会发生什么。

2-这个方法的真正用途是什么，“event.preventDefault（）;”？为什么，在第二个功能中，它似乎毫无用处。你能给我一些它可能有用的例子吗？

谢谢！

Answer 1

preventDefault的目的是阻止浏览器与事件相关的默认操作。您的alert不是浏览器的默认操作，并且不受影响。点击链接是浏览器的默认操作，因此阻止默认设置会阻止链接。

在许多情况下，

preventDefault至关重要。例如，在处理表单的submit事件时，如果我们进行客户端表单验证并且表单无效，则需要preventDefault（直接或间接）;否则，浏览器将提交无效表格。

（我之前“直接或间接地”说过，因为jQuery以一种特殊的方式处理事件处理程序的返回值：如果你返回false，它会为你调用preventDefault和stopPropagation 。）

Answer 2

它会阻止控件的默认操作。如果是链接，则会停止跟踪链接。如果是表单提交，则会阻止提交表单。

它不会与同一元素上的其他JS事件处理程序进行交互。

您可能会使用它的情况示例：

按照链接停止浏览器，因为您已使用Ajax和pushState加载内容并更新URL
停止浏览器提交表单，因为您已经测试了输入的数据并发现了问题

Answer 3

.preventDefault()函数阻止浏览器执行交互元素的正常隐式行为。如果您点击<a>标记，那么除了您的JavaScript之外，浏览器还会尝试关注＆＃34; href＆＃34;值并重新加载页面。那是＆＃34;默认＆＃34;函数名称引用的行为。

您的alert()正在运行，因为.preventDefault()与您的事件处理程序中的代码无关。如果你想＆＃34; abort＆＃34;一个事件处理程序，你只需要return。

请注意，jQuery还为您提供了.stopPropagation()和.stopImmediatePropagation()来取消事件冒泡的过程。这些也对事件处理程序中的代码没有直接影响。

Answer 4

event.preventDefault()禁用事件的默认行为。如果是链接重定向。它不会影响您自己的代码，在这种情况下是alert（）调用。

preventDefault功能：什么是真正的实用程序？

4 个答案: