预防默认功能:什么是真正的效用

preventDefault function: What is the real utility?

本文关键字：什么 默认 功能      更新时间：2023-09-26

我是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（）;"是否在第二个函数中注释，"alert"的工作方式都相同。我认为即使是"警报"之后的内容也会运行。

2-此方法"event.preventDefault （）;"的真正用途是什么？为什么，在第二个函数中，它似乎毫无用处。你能给我一些例子，说明什么时候可能有用吗？

谢谢！

preventDefault的目的是防止浏览器与事件相关的默认操作。您的alert不是浏览器的默认操作，不受影响。跟踪链接是浏览器的默认操作，因此阻止默认操作会阻止跟踪链接。

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

（我在上面说"直接或间接"是因为jQuery以特殊的方式处理事件处理程序的返回值：如果你返回false，它会为你调用preventDefault和stopPropagation。

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

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

可能使用它的情况示例：

  • 停止浏览器跟随链接，因为您已使用 Ajax 和 pushState 加载内容并更新 URL
  • 阻止浏览器提交表单，因为您已测试输入的数据并发现其中有问题

.preventDefault() 函数阻止浏览器执行交互元素的正常隐式行为。如果你点击一个<a>标签，那么除了你的JavaScript所做的任何事情之外，浏览器将尝试遵循"href"值并重新加载页面。这是函数名称引用的"默认"行为。

alert()运行是因为.preventDefault()与事件处理程序中的代码无关。如果要"中止"事件处理程序，只需return即可。

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

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

相关文章：