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. +另一个替代方案是，如果阻止了默认动作，那么就可以检查 `document` 的处理器么？如果是这样的话，那么事件就被处理了，我们不需要对它做出反应。 ```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. +正如我们所看到的那样，`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. +还有一些实现嵌套上下文菜单的替代方法。其中一个是拥有一个特殊的全局对象，它具有处理 `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