From b8c9b8853b4deb53d9366f5f4ded3e03fae5f8d6 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Thu, 26 Mar 2020 19:45:11 +0800 Subject: [PATCH 01/11] Update article.md --- .../04-default-browser-action/article.md | 44 +++++++++---------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/2-ui/2-events/04-default-browser-action/article.md b/2-ui/2-events/04-default-browser-action/article.md index b57696907f..7bfb65d589 100644 --- a/2-ui/2-events/04-default-browser-action/article.md +++ b/2-ui/2-events/04-default-browser-action/article.md @@ -1,23 +1,23 @@ -# 浏览器默认动作 +# 浏览器默认行为 -许多事件会自动触发浏览器动作。 +许多事件会自动触发浏览器执行某些行为。 例如： -- 单击一个链接 —— 触发到它的 URL。 -- 单击表单中的提交按钮 —— 触发提交到服务器的动作。 +- 点击一个链接 —— 触发导航（navigation）到该 URL。 +- 点击表单中的提交按钮 —— 触发提交到服务器的行为。 - 在文本上按下鼠标按键并移动 —— 选中文本。 -如果我们用 JavaScript 处理一个事件，我们通常不需要浏览器动作。幸运的是，它是可以阻止的。 +如果我们用 JavaScript 处理一个事件，我们通常不需要浏览器行为。幸运的是，它是可以阻止的。 -## 阻止浏览器动作 +## 阻止浏览器行为 -有两种方法可以告诉浏览器我们不希望它执行动作： +有两种方法可以告诉浏览器我们不希望它执行行为： - 主流的方法是使用 `event` 对象。有一个 `event.preventDefault()` 方法。 - 如果使用 `on`（而不是 `addEventListener`）分发处理器，那么我们只需要从它内部返回 `false` 即可。 -在下面的示例中，单击链接不会导致 URL 改变： +在下面的示例中，点击链接不会导致 URL 改变： ```html autorun height=60 no-beautify Click here @@ -51,10 +51,10 @@ or 菜单项是 `` 链接，而不是按钮。这有几个好处，比如： -- 许多人喜欢使用“右键” —— “打开一个新窗口”。如果我们使用 ` + ``` -现在，假设我们用我们自己的选项实现我们自己文档范围的上下文菜单。在文档中，我们可能有其他元素和它们自己的上下文菜单： +现在，除了该上下文菜单外，我们还想实现文档范围的上下文菜单。 + +右键单击时，应该显示最近的上下文菜单： ```html autorun height=80 no-beautify run

Right-click here for the document context menu

@@ -148,9 +150,9 @@ menu.onclick = function(event) { ``` -问题是当我们点击 `elem` 时，我们得到两个菜单：按钮级别（事件冒泡）和文档级别的菜单。 +问题是，当我们点击 `elem` 时，我们会得到两个菜单：按钮级和文档级（事件冒泡）的菜单。 -如何修复呢？其中一个解决方案是：“在按钮处理器中，我们全部去处理（按钮级别的）事件，然后停止它。”还要使用 `event.stopPropagation()`： +如何修复呢？其中一个解决方案是：“当我们在按钮处理程序中处理鼠标右键单击事件时，我们阻止其冒泡”，使用 `event.stopPropagation()`： ```html autorun height=80 no-beautify run

Right-click for the document menu

@@ -172,13 +174,13 @@ menu.onclick = function(event) { ``` -现在按钮级别的菜单如期工作。但是代价太大，我们会永远拒绝访问任何外部代码的右击信息，包括收集统计信息的计数器等等。这很不可取。 +现在按钮级菜单如期工作。但是代价太大，我们永远拒绝访问外部代码中的有关右键单击的信息，包括收集统计信息的计数器等。这是非常不明智的。 -另一个替代方案是，在文档级处理器中去检测默认行为是否被阻止？如果是这样的话，那么事件就被处理了，我们不需要对它做出反应。 +另一个替代方案是，检查 `document` 处理程序是否阻止了浏览器的默认行为？如果阻止了，那么该事件已经得到了处理，我们无需再对此事件做出反应。 ```html autorun height=80 no-beautify run -

Right-click for the document menu (fixed with event.defaultPrevented)

+

Right-click for the document menu (added a check for event.defaultPrevented)

``` -现在一切都可以正常工作了。如果我们有嵌套元素，并且每个元素都有自己的上下文菜单，那么这也是可以运行的。只需确保检查每个 `contextmenu` 处理器中的 `event.defaultPrevented`。 +现在一切都可以正常工作了。如果我们有嵌套的元素，并且每个元素都有自己的上下文菜单，那么这也是可以运行的。只需确保检查每个 `contextmenu` 处理程序中的 `event.defaultPrevented`。 ```smart header="event.stopPropagation() 和 event.preventDefault()" -正如我们所看到的那样，`event.stopPropagation()` 和 `event.preventDefault()`（也被认为是 `return false`）是两种不同的事情。它们之间毫无联系。 +正如我们所看到的，`event.stopPropagation()` 和 `event.preventDefault()`（也被认为是 `return false`）是两个不同的东西。它们之间毫无关联。 ``` -```smart header="嵌套的上下文目录结构" -还有一些实现嵌套上下文菜单的替代方法。其中一个是拥有一个特殊的全局对象，它具有处理 `document.oncontextmenu` 的方法，还允许在其中存储各种“低级”处理器方法。 +```smart header="嵌套的上下文菜单结构" +还有其他实现嵌套上下文菜单的方式。其中之一是拥有一个具有 `document.oncontextmenu` 处理程序的全局对象，以及使我们能够在其中存储其他处理程序的方法。 -对象将捕获任何右击事件，查看存储的处理器并运行相应的处理器。 +该对象将捕获任何右键单击，浏览存储的处理程序并运行适当的处理程序。 -但每一段需要上下文菜单的代码都应该了解该对象，并使用它的帮助，而不是使用自己的 `contextmenu` 处理器。 +但是，每段需要上下文菜单的代码都应该了解该对象，并使用它的帮助，而不是使用自己的 `contextmenu` 处理程序。 ``` ## 总结 -有许多默认浏览器行为： +有很多默认的浏览器行为： - `mousedown` —— 开始选择（移动鼠标进行选择）。 -- 在 `` 上 `click` —— 检查/取消选中的 `input`。 -- `submit` —— 点击 `` 或在表单中通过点击 `key:Enter` 触发该事件，并在其后浏览器提交表单。 -- `wheel` —— 鼠标滚轮事件的滚动将作为默认行为。 -- `keydown` —— 按下按键可能会导致将字符添加到字段，或者触发其他行为。 -- `contextmenu` —— 事件发生在右击时，行为是显示浏览器上下文菜单。 -- ...还有更多... +- 在 `` 上的 `click` —— 选中/取消选中的 `input`。 +- `submit` —— 点击 `` 或者在表单字段中按下 `key:Enter` 键会触发该事件，之后浏览器将提交表单。 +- `keydown` —— 按下一个按键可能会导致将字符添加到字段，或者触发其他行为。 +- `contextmenu` —— 事件发生在鼠标右键单击时，触发的行为是显示浏览器上下文菜单。 +- ……还有更多…… + +如果我们只想通过 JavaScript 来处理事件，那么所有默认行为都是可以被阻止的。 -如果我们想要通过 JavaScript 来处理事件，那么所有的默认行为都可以被阻止。 +想要阻止默认行为 —— 可以使用 `event.preventDefault()` 或 `return false`。第二个方法只适用于通过 `on` 分配的处理程序。 -想要阻止默认行为 —— 可以使用 `event.preventDefault()` 或者 `return false`。第二个方法只适用于分发了 `on` 的处理器。 +`addEventListener` 的 `passive: true` 选项告诉浏览器该行为不会被阻止。这对于某些移动端的事件（像 `touchstart` 和 `touchmove`）很有用，用以告诉浏览器在滚动之前不应等待所有处理程序完成。 -如果默认行为被阻止，`event.defaultPrevented` 的值就会变成 `true`，否则会变成 `false`。 +如果默认行为被阻止，`event.defaultPrevented` 的值会变成 `true`，否则为 `false`。 -```warn header="Stay semantic, don't abuse" -从技术上来说，通过阻止默认行为和添加 JavaScript，我们可以定制任何元素的行为。例如，我们可以使链接 `` 像按钮一样工作，而按钮 `