事件: preventDefault() 方法

注意: 此功能在 Web Workers 中可用。

preventDefault() 方法是 Event 接口的方法，它告诉 用户代理，如果事件没有被明确处理，它的默认操作应该不被执行，就像它通常那样。

事件继续像往常一样传播，除非它的一个事件监听器调用 stopPropagation() 或 stopImmediatePropagation()，这两个方法都会立即终止传播。

如以下所述，对不可取消事件调用 preventDefault()（例如，通过 EventTarget.dispatchEvent() 派发的事件），而不指定 cancelable: true 不会有任何效果。

语法

js
event.preventDefault()

示例

阻止默认点击处理

切换复选框是点击复选框的默认操作。此示例演示如何阻止这种情况发生

JavaScript

js
const checkbox = document.querySelector("#id-checkbox");

checkbox.addEventListener("click", checkboxClick, false);

function checkboxClick(event) {
  const warn = "preventDefault() won't let you check this!\n";
  document.getElementById("output-box").innerText += warn;
  event.preventDefault();
}

HTML

html
<p>Please click on the checkbox control.</p>

<form>
  <label for="id-checkbox">Checkbox:</label>
  <input type="checkbox" id="id-checkbox" />
</form>

<div id="output-box"></div>

结果

阻止按键到达编辑字段

以下示例演示如何使用 preventDefault() 阻止无效的文本输入到达输入字段。现在，您通常应该使用 原生 HTML 表单验证。

HTML

以下 HTML 表单捕获用户输入。由于我们只对按键感兴趣，因此我们禁用了 autocomplete 以防止浏览器使用缓存的值填充输入字段。

html
<div class="container">
  <p>Please enter your name using lowercase letters only.</p>

  <form>
    <input type="text" id="my-textbox" autocomplete="off" />
  </form>
</div>

CSS

我们使用了一些 CSS 来绘制用户按下无效键时将出现的警告框

css
.warning {
  border: 2px solid #f39389;
  border-radius: 2px;
  padding: 10px;
  position: absolute;
  background-color: #fbd8d4;
  color: #3b3c40;
}

JavaScript

这是执行此操作的 JavaScript 代码。首先，监听 keydown 事件

js
const myTextbox = document.getElementById("my-textbox");
myTextbox.addEventListener("keydown", checkName, false);

checkName() 函数查看按下的键，并决定是否允许它

js
function checkName(evt) {
  const key = evt.key;
  const lowerCaseAlphabet = "abcdefghijklmnopqrstuvwxyz";
  if (!lowerCaseAlphabet.includes(key)) {
    evt.preventDefault();
    displayWarning(`Please use lowercase letters only.\nKey pressed: ${key}\n`);
  }
}

displayWarning() 函数显示问题通知。它不是一个优雅的函数，但对于此示例的目的来说已经足够了

js
let warningTimeout;
const warningBox = document.createElement("div");
warningBox.className = "warning";

function displayWarning(msg) {
  warningBox.innerText = msg;

  if (document.body.contains(warningBox)) {
    clearTimeout(warningTimeout);
  } else {
    // insert warningBox after myTextbox
    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
  }

  warningTimeout = setTimeout(() => {
    warningBox.parentNode.removeChild(warningBox);
    warningTimeout = -1;
  }, 2000);
}

结果

注释

在事件流的任何阶段调用 preventDefault() 都会取消事件，这意味着实现通常由于事件而采取的任何默认操作都不会发生。

您可以使用 Event.cancelable 检查事件是否可取消。对不可取消事件调用 preventDefault() 不会有任何效果。

规范

规范
DOM 标准
# ref-for-dom-event-preventdefault③

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。