diff --git a/2-ui/2-events/04-default-browser-action/1-why-return-false-fails/solution.md b/2-ui/2-events/04-default-browser-action/1-why-return-false-fails/solution.md index 2862e60063..fd5d260fa8 100644 --- a/2-ui/2-events/04-default-browser-action/1-why-return-false-fails/solution.md +++ b/2-ui/2-events/04-default-browser-action/1-why-return-false-fails/solution.md @@ -1,6 +1,6 @@ -When the browser reads the `on*` attribute like `onclick`, it creates the handler from its content. +当浏览器读取如 `onclick` 这样的 `on*` 属性时，它会根据内容创建一个处理程序。 -For `onclick="handler()"` the function will be: +对 `onclick="handler()"` 来说函数是： ```js function(event) { @@ -8,9 +8,9 @@ function(event) { } ``` -Now we can see that the value returned by `handler()` is not used and does not affect the result. +现在我们可以看到 `handler()` 返回值没有被使用，也没有对结果产生影响。 -The fix is simple: +修复方法很简单： ```html run ``` -The problem is that when we click on `elem`, we get two menus: the button-level and (the event bubbles up) the document-level menu. +问题是当我们点击 `elem` 时，我们得到两个菜单：按钮级别（事件冒泡）和文档级别的菜单。 -How to fix it? One of solutions is to think like: "We fully handle the event in the button handler, let's stop it" and use `event.stopPropagation()`: +如何修复呢？其中一个解决方案是：“在按钮处理器中，我们全部去处理（按钮级别的）事件，然后停止它。”还要使用 `event.stopPropagation()`： ```html autorun height=80 no-beautify run

Right-click for the document menu

@@ -159,9 +159,9 @@ How to fix it? One of solutions is to think like: "We fully handle the event in ``` -Now the button-level menu works as intended. But the price is high. We forever deny access to information about right-clicks for any outer code, including counters that gather statistics and so on. That's quite unwise. +现在按钮级别的菜单如期工作。但是代价太大，我们会永远拒绝访问任何外部代码的右击信息，包括收集统计信息的计数器等等。这很不可取。 -An alternative solution would be to check in the `document` handler if the default action was prevented? If it is so, then the event was handled, and we don't need to react on it. +另一个替代方案是，在文档级处理器中去检测默认动作是否被阻止？如果是这样的话，那么事件就被处理了，我们不需要对它做出反应。 ```html autorun height=80 no-beautify run @@ -185,44 +185,44 @@ An alternative solution would be to check in the `document` handler if the defau ``` -Now everything also works correctly. If we have nested elements, and each of them has a context menu of its own, that would also work. Just make sure to check for `event.defaultPrevented` in each `contextmenu` handler. +现在一切都可以正常工作了。如果我们有嵌套元素，并且每个元素都有自己的上下文菜单，那么这也是可以运行的。只需确保检查每个 `contextmenu` 处理器中的 `event.defaultPrevented`。 -```smart header="event.stopPropagation() and event.preventDefault()" -As we can clearly see, `event.stopPropagation()` and `event.preventDefault()` (also known as `return false`) are two different things. They are not related to each other. +```smart header="event.stopPropagation() 和 event.preventDefault()" +正如我们所看到的那样，`event.stopPropagation()` 和 `event.preventDefault()`（也被认为是 `return false`）是两种不同的事情。它们之间毫无联系。 ``` -```smart header="Nested context menus architecture" -There are also alternative ways to implement nested context menus. One of them is to have a special global object with a method that handles `document.oncontextmenu`, and also methods that allow to store various "lower-level" handlers in it. +```smart header="嵌套的上下文目录结构" +还有一些实现嵌套上下文菜单的替代方法。其中一个是拥有一个特殊的全局对象，它具有处理 `document.oncontextmenu` 的方法，还允许在其中存储各种“低级”处理器方法。 -The object will catch any right-click, look through stored handlers and run the appropriate one. +对象将捕获任何右击事件，查看存储的处理器并运行相应的处理器。 -But then each piece of code that wants a context menu should know about that object and use its help instead of the own `contextmenu` handler. +但每一段需要上下文菜单的代码都应该了解该对象，并使用它的帮助，而不是使用自己的 `contextmenu` 处理器。 ``` -## Summary +## 总结 -There are many default browser actions: +有许多默认浏览器动作： -- `mousedown` -- starts the selection (move the mouse to select). -- `click` on `` -- checks/unchecks the `input`. -- `submit` -- clicking an `` or hitting `key:Enter` inside a form field causes this event to happen, and the browser submits the form after it. -- `wheel` -- rolling a mouse wheel event has scrolling as the default action. -- `keydown` -- pressing a key may lead to adding a character into a field, or other actions. -- `contextmenu` -- the event happens on a right-click, the action is to show the browser context menu. -- ...there are more... +- `mousedown` —— 开始选择（移动鼠标进行选择）。 +- 在 `` 上 `click` —— 检查/取消选中的 `input`。 +- `submit` —— 单击 `` 或在表单中通过单击 `key:Enter` 触发该事件，并在其后浏览器提交表单。 +- `wheel` —— 鼠标滚轮事件的滚动将作为默认动作。 +- `keydown` —— 按下按键可能会导致将字符添加到字段，或者触发其他动作。 +- `contextmenu` —— 事件发生在右击时，动作是显示浏览器上下文菜单。 +- ...还有更多... -All the default actions can be prevented if we want to handle the event exclusively by JavaScript. +如果我们想要通过 JavaScript 来处理事件，那么所有的默认动作都可以被阻止。 -To prevent a default action -- use either `event.preventDefault()` or `return false`. The second method works only for handlers assigned with `on`. +想要阻止默认行为 —— 可以使用 `event.preventDefault()` 或者 `return false`。第二个方法只适用于分发了 `on` 的处理器。 -If the default action was prevented, the value of `event.defaultPrevented` becomes `true`, otherwise it's `false`. +如果默认动作被阻止，`event.defaultPrevented` 的值就会变成 `true`，否则会变成 `false`。 ```warn header="Stay semantic, don't abuse" -Technically, by preventing default actions and adding JavaScript we can customize the behavior of any elements. For instance, we can make a link `` work like a button, and a button `