使用jQuery .preventDefault（）停止操作

由于操作未执行，我们需要知道用户何时启动了操作，并可以使用 event.isDefaultPrevented() 来确定此方法是否由此事件触发的事件处理程序调用。这可以用于触发函数调用。对于使用 jQuery 中的 XHR 的动态 URL，例如 href="index.php?page=contact" 而不是 contact.php 来获取包含模块的页面，这也可能很有用。您可能还想查看 MOD 重写选项，它也可以提供此功能和 SEO 优势。jQuery 停止事件函数。如果您使用的是 $(document).bind("keydown keypress", function(event)，请注意 e.preventDefault() 将不起作用，请尝试 event.preventDefault()。有时，您有一个需要作为超链接的超链接，但您不希望它处理并打开链接，而只想调用一个 JavaScript 函数。幸运的是，jQuery 中有一个函数可以停止超链接操作。

jQuery preventDefault() 函数演示示例

示例 1：阻止并捕获超链接点击

$("a").click(function(event) {
  event.preventDefault();
  $('<div>
<p>')
    .append('默认 ' + event.type + ' 已阻止')
    .appendTo('#log');
});
</p>
<p><strong>示例 2：阻止表单提交按钮</strong></p>
<pre class="brush:php;toolbar:false">$('#myform').submit(function(event) {
    event.preventDefault();
    var self = this;
    window.setTimeout(function() {
        self.submit();
    }, 2000);
});

示例 3：在动画效果后延迟超链接目标

$("#ELEMENT_WHICH_AFFECT_THE_SLIDEUP")
.click(function(event){
    event.preventDefault(); // 阻止链接重定向
    var time = 1000; // slideup 效果的时间
    var url = $(this).attr("href"); // 选择用于通过 JavaScript 重定向的 URL

    $("#ELEMENT_TO_SLIDE_UP").slideUp(time); // 效果
    window.setTimeout(function(){document.location.href=url;}, time); // 超时并在效果完成后等待
    return -1;
});

示例 4：禁用键盘向下滚动按钮

$(document).keydown(function(event){
    // 向下移动
    if(event.keyCode == '40'){
        event.preventDefault();
        var posY = $('#'+selectedTxtID).css('top');
        posY = parseFloat(posY);
        var newPosY = posY + 1;
        $('#'+selectedTxtID).css('top', newPosY+'px');
    }
});

此函数不仅可以用于超链接，还可以用于任何具有您希望阻止的默认操作的元素。

jQuery 的 preventDefault() 方法常见问题解答 (FAQ)

jQuery 的 preventDefault() 方法的主要功能是什么？

jQuery 中的 preventDefault() 方法主要用于阻止事件的默认操作发生。例如，如果您网页上有一个链接，并且不希望它在单击时重定向到另一个页面，则可以使用 preventDefault() 方法来阻止此默认操作。此方法在您希望控制代码中的事件操作时特别有用，从而为您的 Web 应用程序提供更高水平的交互性。

preventDefault() 方法与 stopPropagation() 方法有何不同？

虽然这两种方法都用于控制事件操作，但它们的目的不同。preventDefault() 方法阻止事件的默认操作发生，而 stopPropagation() 方法阻止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。换句话说，preventDefault() 处理元素的默认行为，而 stopPropagation() 处理 DOM 层次结构中的事件流。

我可以将 preventDefault() 方法与所有事件一起使用吗？

不可以，preventDefault() 方法不能与所有事件一起使用。它仅适用于具有要阻止的默认操作的事件。例如，它可以与锚标记的“click”事件一起使用，以防止导航到新 URL 的默认操作。但是，它不能与没有默认操作的自定义事件一起使用。

如何检查是否已为事件调用 preventDefault() 方法？

您可以使用 isDefaultPrevented() 方法来检查是否在事件上调用了 preventDefault()。此方法返回一个布尔值——如果调用了 preventDefault() 则为 true，否则为 false。

我可以在 Internet Explorer 中使用 preventDefault() 方法吗？

可以，您可以在 Internet Explorer 中使用 preventDefault() 方法。但是，较旧版本的 Internet Explorer（IE8 及以下版本）不支持此方法。对于这些版本，您可以使用事件对象的 returnValue 属性来实现相同的效果。

如果我在不可取消的事件上调用 preventDefault() 会发生什么？

如果您在不可取消的事件上调用 preventDefault()，则该方法将无效。不可取消的事件是指其默认操作无法阻止的事件。您可以使用事件对象的 cancelable 属性来检查事件是否可取消。

我可以为同一个事件多次调用 preventDefault() 吗？

可以，您可以为同一个事件多次调用 preventDefault()，但它不会有任何额外效果。一旦事件的默认操作被阻止，再次调用 preventDefault() 不会改变任何内容。

我可以将 preventDefault() 与键盘事件一起使用吗？

可以，您可以将 preventDefault() 与键盘事件一起使用。例如，您可以阻止“keydown”事件的默认操作，以阻止将字符输入文本字段。

如何在条件语句中使用 preventDefault()？

您可以使用条件语句中的 preventDefault() 来控制何时应阻止事件的默认操作。例如，如果某些验证检查失败，您可以阻止表单提交。

我可以将 preventDefault() 与触摸事件一起使用吗？

可以，您可以将 preventDefault() 与触摸事件一起使用。例如，您可以阻止“touchstart”事件的默认操作，以阻止识别触摸手势。