From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../zh-cn/web/api/event/preventdefault/index.html | 170 +++++++++++++++++++++ 1 file changed, 170 insertions(+) create mode 100644 files/zh-cn/web/api/event/preventdefault/index.html (limited to 'files/zh-cn/web/api/event/preventdefault') diff --git a/files/zh-cn/web/api/event/preventdefault/index.html b/files/zh-cn/web/api/event/preventdefault/index.html new file mode 100644 index 0000000000..643b1be269 --- /dev/null +++ b/files/zh-cn/web/api/event/preventdefault/index.html @@ -0,0 +1,170 @@ +--- +title: event.preventDefault +slug: Web/API/Event/preventDefault +tags: + - API + - DOM + - Event + - preventDefault +translation_of: Web/API/Event/preventDefault +--- +

{{APIRef("DOM")}}

+ +

{{domxref("Event")}} 接口的 preventDefault()方法，告诉{{Glossary("user agent")}}：如果此事件没有被显式处理，它默认的动作也不应该照常执行。此事件还是继续传播，除非碰到事件侦听器调用{{domxref("Event.stopPropagation", "stopPropagation()")}} 或{{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}，才停止传播。

+ +

语法

+ +
event.preventDefault();
+
+
+ +

参数

+ +

无

+ +

返回值

+ +

undefined

+ +

示例

+ +

阻止默认的点击事件执行

+ +

选中复选框是点击复选框的默认行为。下面这个例子说明了怎样阻止默认行为的发生：

+ +

JavaScript

+ +
document.querySelector("#id-checkbox").addEventListener("click", function(event) {
+         document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>";
+         event.preventDefault();
+}, false);
+ +

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>
+ +

结果

+ +

你可以看到如下的行为:

+ +

{{EmbedLiveSample("Blocking_default_click_handling")}}

+ +

在编辑域中阻止按键

+ +

下面的这个例子说明了如何使用preventDefault()在文本编辑域中阻止有效的文本输入。如今，你通常可以使用原生的HTML表单验证来代替。

+ +

HTML

+ +

表单:

+ +
<div class="container">
+  <p>Please enter your name using lowercase letters only.</p>
+
+  <form>
+    <input type="text" id="my-textbox">
+  </form>
+</div>
+ +

CSS

+ +

当用户按下一个有效按键的时候，我们就给这个warning box 加上一些样式：

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

JavaScript

+ +

这里是相关的JavaScript代码。首先，监听{{event("keypress")}}事件：

+ +
var myTextbox = document.getElementById('my-textbox');
+myTextbox.addEventListener('keypress', checkName, false);
+ +

 checkName()方法可以监听按键并且决定是否允许按键的默认行为发生。

+ +
function checkName(evt) {
+  var charCode = evt.charCode;
+  if (charCode != 0) {
+    if (charCode < 97 || charCode > 122) {
+      evt.preventDefault();
+      displayWarning(
+        "Please use lowercase letters only."
+        + "\n" + "charCode: " + charCode + "\n"
+      );
+    }
+  }
+}
+ +

displayWarning()方法显示了一个问题的通知。这不是一种优雅的方法，但是确实可以达到我们的目的。

+ +
var warningTimeout;
+var warningBox = document.createElement("div");
+warningBox.className = "warning";
+
+function displayWarning(msg) {
+  warningBox.innerHTML = msg;
+
+  if (document.body.contains(warningBox)) {
+    window.clearTimeout(warningTimeout);
+  } else {
+    // insert warningBox after myTextbox
+    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
+  }
+
+  warningTimeout = window.setTimeout(function() {
+      warningBox.parentNode.removeChild(warningBox);
+      warningTimeout = -1;
+    }, 2000);
+}
+ +

结果

+ +

这里就是代码的执行结果:

+ +

{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}

+ +

备注

+ +

在事件流的任何阶段调用preventDefault()都会取消事件，这意味着任何通常被该实现触发并作为结果的默认行为都不会发生。

+ +

你可以使用 {{domxref("Event.cancelable")}} 来检查该事件是否支持取消。为一个不支持cancelable的事件调用preventDefault()将没有效果。

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}{{ Spec2('DOM WHATWG') }}
{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}{{ Spec2('DOM2 Events') }}初版
+ +

浏览器兼容

+ +

{{Compat("api.Event.preventDefault")}}

-- cgit v1.2.3-54-g00ecf