PreventDefault 调用了两次

在开发 Web 应用程序时，经常需要侦听用户事件，例如鼠标点击、键盘按下等。当事件被触发时，通常需要进行某些处理，或者阻止传统的事件行为。此时，通常需要使用 preventDefault() 方法来阻止浏览器的默认行为。

然而，在某些情况下，可能会发现 preventDefault() 被调用了两次，并且无法阻止默认行为。这种情况通常是由以下原因之一引起的：

1. 事件绑定重复

如果事件绑定重复，则可能会触发两次 preventDefault()，从而导致它无法正常工作。例如，以下代码绑定了两次单击事件：

$(document).ready(function() {
  $("button#myButton").on("click", function(event) {
    event.preventDefault();
    alert("Button clicked!");
  });
  $("button#myButton").on("click", function(event) {
    event.preventDefault();
    alert("Button clicked again!");
  });
});

此时，单击按钮时，将弹出两个警报框，但是默认行为仍然会继续执行。

为了解决此问题，请确保只绑定一次事件监听器。

2. 事件传播

如果事件传播到了其他元素，而这些元素也绑定了 preventDefault() 方法，则可能会导致 preventDefault() 被调用两次，从而无法阻止默认行为。例如，以下代码将单击事件绑定到按钮和文本输入框上：

$(document).ready(function() {
  $("button#myButton").on("click", function(event) {
    event.preventDefault();
    alert("Button clicked!");
  });
  $("input#myInput").on("click", function(event) {
    event.preventDefault();
    alert("Input clicked!");
  });
});

此时，单击文本输入框时，preventDefault() 将被调用两次，从而无法阻止默认行为。

为了解决此问题，请确保事件只传播到需要绑定 preventDefault() 的元素。

在处理 preventDefault() 调用两次的问题时，需要注意两种常见情况：事件绑定重复和事件传播。通过避免这些情况，可以确保 preventDefault() 能够正常工作，并防止浏览器的默认行为。