Skip to content

Commit 43b6dad

Browse files
levidingleviding
authored
Update translation of 2-ui/3-event-details/4-mouse-drag-and-drop and other parts content (#694)
Update translation of 2-ui/3-event-details/4-mouse-drag-and-drop and other parts content (#694)
1 parent b60c501 commit 43b6dad

File tree

20 files changed

+176
-170
lines changed

20 files changed

+176
-170
lines changed

‎1-js/09-classes/06-instanceof/article.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# 类型检查："instanceof"
1+
# 类检查："instanceof"
22

33
`instanceof` 操作符用于检查一个对象是否属于某个特定的 class。同时，它还考虑了继承。
44

@@ -215,4 +215,4 @@ alert( {}.toString.call(new XMLHttpRequest()) ); // [object XMLHttpRequest]
215215

216216
正如我们所看到的，从技术上讲，`{}.toString` 是一种“更高级的” `typeof`。
217217

218-
当我们使用多层类结构，并想要对该类进行检查，同时还要考虑继承时，这种场景下 `instanceof` 运算符确实很出色。
218+
当我们使用类的层次结构（hierarchy），并想要对该类进行检查，同时还要考虑继承时，这种场景下 `instanceof` 操作符确实很出色。

‎1-js/10-error-handling/2-custom-errors/article.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
JavaScript 允许将 `throw` 与任何参数一起使用，所以从技术上讲，我们自定义的 error 不需要继承从 `Error` 中继承。但是，如果我们继承，那么就可以使用 `obj instanceof Error` 来识别 error 对象。因此，最好继承它。
88

9-
随着虽开发的应用程序的增长，我们自己的 error 自然会形成形成一个层次结构。例如，`HttpTimeoutError` 可能继承自 `HttpError`，等等。
9+
随着虽开发的应用程序的增长，我们自己的 error 自然会形成形成一个层次结构（hierarchy）。例如，`HttpTimeoutError` 可能继承自 `HttpError`，等等。
1010

1111
## 扩展 Error
1212

‎2-ui/1-document/04-searching-elements-dom/article.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@
103103
这个方法确实功能强大，因为可以使用任何 CSS 选择器。
104104

105105
```smart header="也可以使用伪类"
106-
CSS 选择器的伪类，例如 `:hover` 和 `:active` 也都是被支持的。例如，`document.querySelectorAll(':hover')` 将会返回指针现在已经结束的元素的集合（按嵌套顺序：从最外层 `<html>` 到嵌套最多的元素）。
106+
CSS 选择器的伪类，例如 `:hover` 和 `:active` 也都是被支持的。例如，`document.querySelectorAll(':hover')` 将会返回鼠标指针现在已经结束的元素的集合（按嵌套顺序：从最外层 `<html>` 到嵌套最多的元素）。
107107
```
108108

109109
## querySelector [#querySelector]

‎2-ui/1-document/09-size-and-scroll/article.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ JavaScript 中有许多属性可让我们读取有关元素宽度、高度和其
5353
5454
## offsetParent，offsetLeft/Top
5555
56-
这些属性很少使用，但它们仍然是“最外层”的几何属性，所以我们将从它们开始。
56+
这些属性很少使用，但它们仍然是“最外面”的几何属性，所以我们将从它们开始。
5757
5858
`offsetParent` 是最接近的祖先（ancestor），在浏览器渲染期间，它被用于计算坐标。
5959

‎2-ui/1-document/10-size-and-scroll-window/article.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
我们如何找到浏览器窗口（window）的宽度和高度呢？我们如何获得文档（document）的包括滚动部分在内的完整宽度和高度呢？我们如何使用 JavaScript 滚动页面？
44

5-
对于大多数此类请求，我们可以使用与 `<html>` 标签相对应的根文档元素 `document.documentElement`。但是还有很多其他方法，这些方法和特性非常重要，值得我们考虑。
5+
对于大多数此类请求，我们可以使用与 `<html>` 标签相对应的根文档元素 `document.documentElement`。但是还有很多其他方法，这些方法和特性非常重要，值得我们考虑。
66

77
## 窗口的 width/height
88

@@ -33,7 +33,7 @@ alert( document.documentElement.clientWidth ); // 减去滚动条宽度后的窗
3333
````
3434
3535
```warn header="`DOCTYPE` 很重要"
36-
请注意：当 HTML 中没有 `<!DOCTYPE HTML>` 时，顶层几何属性的工作方式可能就会有所不同。可能会出现一些稀奇古怪的情况。
36+
请注意：当 HTML 中没有 `<!DOCTYPE HTML>` 时，顶层级（top-level）几何属性的工作方式可能就会有所不同。可能会出现一些稀奇古怪的情况。
3737
3838
在现代 HTML 中，我们始终都应该写 `DOCTYPE`。
3939
```

‎2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ importance: 5
1010

1111
要求：
1212

13-
- 球的中心应该恰好在点击时指针位置的下方（如果在球不越过球场边缘的情况下，能实现的话）。
13+
- 球的中心应该恰好在点击时鼠标指针位置的下方（如果在球不越过球场边缘的情况下，能实现的话）。
1414
- 最好添加一些 CSS 动画。
1515
- 球不能越过场地边界。
1616
- 页面滚动时，不会有任何中断。

‎2-ui/2-events/02-bubbling-and-capturing/article.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ elem.addEventListener("click", e => alert(2));
210210
211211
每个处理程序都可以访问 `event` 对象的属性：
212212
213-
- `event.target` —— 引发事件的最深层的元素。
213+
- `event.target` —— 引发事件的层级最深的元素。
214214
- `event.currentTarget`（=`this`）—— 处理事件的当前元素（具有处理程序的元素）
215215
- `event.eventPhase` —— 当前阶段（capturing=1，target=2，bubbling=3）。
216216
@@ -220,6 +220,6 @@ elem.addEventListener("click", e => alert(2));
220220
221221
在现实世界中，当事故发生时，当地警方会首先做出反应。他们最了解发生这件事的地方。然后，如果需要，上级主管部门再进行处理。
222222
223-
事件处理程序也是如此。在特定元素上设置处理程序的代码，了解有关该元素最详尽的信息。特定于 `<td>` 的处理程序可能恰好适合于该 `<td>`，这个处理程序知道关于该元素的所有信息。所以该处理程序应该首先获得机会。然后，它的直接父元素也了解相关上下文，但了解的内容会少一些，以此类推，直到处理一般性概念并最后运行的最顶层的元素为止。
223+
事件处理程序也是如此。在特定元素上设置处理程序的代码，了解有关该元素最详尽的信息。特定于 `<td>` 的处理程序可能恰好适合于该 `<td>`，这个处理程序知道关于该元素的所有信息。所以该处理程序应该首先获得机会。然后，它的直接父元素也了解相关上下文，但了解的内容会少一些，以此类推，直到处理一般性概念并最后运行的最顶部的元素为止。
224224
225225
冒泡和捕获为“事件委托”奠定了基础 —— 一种非常强大的事件处理模式，我们将在下一章中进行研究。

‎2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ importance: 5
2929

3030
在这里你将需要两个事件：
3131
- `mouseover` 当鼠标指针出现在元素上方时触发。
32-
- `mouseout` 当指针离开元素时触发。
32+
- `mouseout` 当鼠标指针离开元素时触发。
3333

3434
请使用事件委托：在 `document` 上设置两个处理程序，以跟踪带有 `data-tooltip` 的元素中的所有 "over" 和 "out"，并从那里管理工具提示。
3535

‎2-ui/2-events/05-dispatch-events/article.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
## 事件构造器
1010

11-
内建事件类形成一个层次结构，类似于 DOM 元素类。根是内建的 [Event](http://www.w3.org/TR/dom/#event) 类。
11+
内建事件类形成一个层次结构（hierarchy），类似于 DOM 元素类。根是内建的 [Event](http://www.w3.org/TR/dom/#event) 类。
1212

1313
我们可以像这样创建 `Event` 对象：
1414

‎2-ui/3-event-details/1-mouse-events-basics/article.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -194,4 +194,4 @@ Before...
194194

195195
`mousedown` 的默认浏览器操作是文本选择，如果它对界面不利，则应避免它。
196196

197-
在下一章中，我们将看到有关指针移动后的事件，以及如何跟踪其下元素变化的更多详细信息。
197+
在下一章中，我们将看到有关鼠标指针移动后的事件，以及如何跟踪其下元素变化的更多详细信息。

‎2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md

+17-17
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
5353
另一方面，我们应该记住，鼠标指针并不会“访问”所有元素。它可以“跳过”一些元素。
5454
55-
特别是，指针可能会从窗口外跳到页面的中间。在这种情况下，`relatedTarget` 为 `null`，因为它是从石头缝里蹦出来的（nowhere）：
55+
特别是，鼠标指针可能会从窗口外跳到页面的中间。在这种情况下，`relatedTarget` 为 `null`，因为它是从石头缝里蹦出来的（nowhere）：
5656
5757
![](mouseover-mouseout-from-outside.svg)
5858
@@ -61,26 +61,26 @@
6161
6262
它的 HTML 有两个嵌套的元素：`<div id="child">` 在 `<div id="parent">` 内部。如果将鼠标快速移动到它们上，则可能只有 `<div id="child">` 或者只有 `<div id="parent">` 触发事件，或者根本没有事件触发。
6363
64-
还可以将指针移动到 `<div id="child">` 中，然后将其快速向下移动过其父级元素。如果移动速度足够快，则父元素就会被忽略。鼠标会越过父元素而不会引起其注意。
64+
还可以将鼠标指针移动到 `<div id="child">` 中，然后将其快速向下移动过其父级元素。如果移动速度足够快，则父元素就会被忽略。鼠标会越过父元素而不会引起其注意。
6565
6666
[codetabs height=360 src="mouseoverout-fast"]
6767
```
6868

6969
```smart header="如果 `mouseover` 被触发了，则必须有 `mouseout`"
70-
在鼠标快速移动的情况下，中间元素可能会被忽略，但是我们可以肯定一件事：如果指针“正式地”进入了一个元素（生成了 `mouseover` 事件），那么一旦它离开，我们就会得到 `mouseout`。
70+
在鼠标快速移动的情况下，中间元素可能会被忽略，但是我们可以肯定一件事：如果鼠标指针“正式地”进入了一个元素（生成了 `mouseover` 事件），那么一旦它离开，我们就会得到 `mouseout`。
7171
```
7272
7373
## 当移动到一个子元素时 mouseout
7474
75-
`mouseout` 的一个重要功能 —— 当指针从元素移动到其后代时触发，例如在下面的这个 HTML 中，从 `#parent` 到 `#child`：
75+
`mouseout` 的一个重要功能 —— 当鼠标指针从元素移动到其后代时触发，例如在下面的这个 HTML 中，从 `#parent` 到 `#child`：
7676
7777
```html
7878
<div id="parent">
7979
<div id="child">...</div>
8080
</div>
8181
```
8282

83-
如果我们在 `#parent` 上，然后将指针更深入地移入 `#child`，但是在 `#parent` 上会得到 `mouseout`！
83+
如果我们在 `#parent` 上，然后将鼠标指针更深入地移入 `#child`，但是在 `#parent` 上会得到 `mouseout`！
8484

8585
![](mouseover-to-child.svg)
8686

@@ -106,7 +106,7 @@
106106
[codetabs height=360 src="mouseoverout-child"]
107107
```
108108

109-
如上例所示，当指针从 `#parent` 元素移动到 `#child` 时，会在父元素上触发两个处理程序：`mouseout` 和 `mouseover`：
109+
如上例所示，当鼠标指针从 `#parent` 元素移动到 `#child` 时，会在父元素上触发两个处理程序：`mouseout` 和 `mouseover`：
110110

111111
```js
112112
parent.onmouseout = function(event) {
@@ -119,9 +119,9 @@ parent.onmouseover = function(event) {
119119

120120
**如果我们不检查处理程序中的 `event.target`，那么似乎鼠标指针离开了 `#parent` 元素，然后立即回到了它上面。**
121121

122-
但是事实并非如此！指针仍然位于父元素上，它只是更深入地移入了子元素。
122+
但是事实并非如此！鼠标指针仍然位于父元素上，它只是更深入地移入了子元素。
123123

124-
如果离开父元素时有一些行为（action），例如一个动画在 `parent.onmouseout` 中运行，当指针深入 `#parent` 时，我们并不希望发生这种行为。
124+
如果离开父元素时有一些行为（action），例如一个动画在 `parent.onmouseout` 中运行，当鼠标指针深入 `#parent` 时，我们并不希望发生这种行为。
125125

126126
为了避免它，我们可以在处理程序中检查 `relatedTarget`，如果鼠标指针仍在元素内，则忽略此类事件。
127127

@@ -138,14 +138,14 @@ parent.onmouseover = function(event) {
138138

139139
这些事件非常简单。
140140

141-
当指针进入一个元素时 —— 会触发 `mouseenter`。而指针在元素或其后代中的确切位置无关紧要。
141+
当鼠标指针进入一个元素时 —— 会触发 `mouseenter`。而鼠标指针在元素或其后代中的确切位置无关紧要。
142142

143143
当鼠标指针离开该元素时，事件 `mouseleave` 才会触发。
144144

145145
```online
146-
这个例子和上面的例子相似，但是现在最顶层的元素有 `mouseenter/mouseleave` 而不是 `mouseover/mouseout`。
146+
这个例子和上面的例子相似，但是现在最顶部的元素有 `mouseenter/mouseleave` 而不是 `mouseover/mouseout`。
147147
148-
正如你所看到的，唯一生成的事件是与将指针移入或移出顶部元素有关的事件。当指针进入 child 并返回时，什么也没发生。在后代之间的移动会被忽略。
148+
正如你所看到的，唯一生成的事件是与将鼠标指针移入或移出顶部元素有关的事件。当鼠标指针进入 child 并返回时，什么也没发生。在后代之间的移动会被忽略。
149149
150150
[codetabs height=340 src="mouseleave"]
151151
```
@@ -158,14 +158,14 @@ parent.onmouseover = function(event) {
158158

159159
通常的解决方案是 —— 在 `<table>` 中设置处理程序，并在那里处理事件。但 `mouseenter/leave` 不会冒泡。因此，如果类似的事件发生在 `<td>` 上，那么只有 `<td>` 上的处理程序才能捕获到它。
160160

161-
`<table>` 上的 `mouseenter/leave` 的处理程序仅在指针进入/离开整个表格时才会触发。无法获取有关其内部移动的任何信息。
161+
`<table>` 上的 `mouseenter/leave` 的处理程序仅在鼠标指针进入/离开整个表格时才会触发。无法获取有关其内部移动的任何信息。
162162

163163
因此，让我们使用 `mouseover/mouseout`。
164164

165-
让我们从突出显示鼠标指针下的元素的简单处理程序开始：
165+
让我们从高亮显示鼠标指针下的元素的简单处理程序开始：
166166

167167
```js
168-
// 突出显示鼠标指针下的元素
168+
// 高亮显示鼠标指针下的元素
169169
table.onmouseover = function(event) {
170170
let target = event.target;
171171
target.style.background = 'pink';
@@ -178,7 +178,7 @@ table.onmouseout = function(event) {
178178
```
179179

180180
```online
181-
现在它们已经激活了。当鼠标在下面这个表格的各个元素上移动时，当前位于鼠标指针下的元素会被突出显示：
181+
现在它们已经激活了。当鼠标在下面这个表格的各个元素上移动时，当前位于鼠标指针下的元素会被高亮显示：
182182
183183
[codetabs height=480 src="mouseenter-mouseleave-delegation"]
184184
```
@@ -197,14 +197,14 @@ table.onmouseout = function(event) {
197197

198198
再次，重要的功能是：
199199
1. 它使用事件委托来处理表格中任何 `<td>` 的进入/离开。因此，它依赖于 `mouseover/out` 而不是 `mouseenter/leave`，`mouseenter/leave` 不会冒泡，因此也不允许事件委托。
200-
2. 额外的事件，例如在 `<td>` 的后代之间移动都会被过滤掉，因此 `onEnter/Leave` 仅在指针进入/离开 `<td>` 整体时才会运行。
200+
2. 额外的事件，例如在 `<td>` 的后代之间移动都会被过滤掉，因此 `onEnter/Leave` 仅在鼠标指针进入/离开 `<td>` 整体时才会运行。
201201

202202
```online
203203
这是带有所有详细信息的完整示例：
204204
205205
[codetabs height=460 src="mouseenter-mouseleave-delegation-2"]
206206
207-
尝试将鼠标指针移入和移出表格单元格及其内部。快还是慢都没关系。与前面的示例不同，只有 `<td>` 被作为一个整体突出显示。
207+
尝试将鼠标指针移入和移出表格单元格及其内部。快还是慢都没关系。与前面的示例不同，只有 `<td>` 被作为一个整体高亮显示。
208208
```
209209

210210
## 总结

‎2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1+
正如我们从 HTML/CSS 中所看到的，滑动条就是一个带有彩色北京的 `<div>`，其中包含一个滑块 —— 另一个具有 `position:relative` 的 `<div>`。
12

2-
我们这里有一个水平拖放。
3+
为了对滑块进行定位，我们使用 `position:relative` 来提供相对于其父元素的坐标，在这儿它比 `position:absolute` 更方便。
34

4-
我们使用 `position:relative` 和滚动条的相对坐标的 thumb 来定位元素。这里比 `position:absolute` 更方便。
5+
然后我们通过限制宽度来实现仅水平方向的拖放。

‎2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@ importance: 5
22

33
---
44

5-
# 滚动条
5+
# 滑动条
66

7-
创建一个滚动条
7+
创建一个滑动条（slider）：
88

99
[iframe src="solution" height=60 border=1]
1010

11-
用鼠标拖动蓝色 thumb 并移动它。
11+
用鼠标拖动蓝色的滑块（thumb）并移动它。
1212

1313
重要的细节：
1414

15-
- 在按住鼠标进行拖动时，鼠标可能会越过滚动条的上下边界，滑块应该还在继续移动（对用户来说，这非常方便）。
16-
- 如果鼠标在移动到左边或右边的速度非常快，那么 thumb 应该完全停在边缘。
15+
- 当鼠标按钮被按下时，在滑动过程中，鼠标指针可能会移动到滑块的上方或下方。此时滑块仍会继续移动（方便用户）。
16+
- 如果鼠标非常快地向左边或者向右边移动，那么滑块应该恰好停在边缘。

‎2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
我们应该把属性切换回 `position:fixed` 来拖动它，它让坐标管理更简单。最后，我们应该使用 `position:absolute`。
1+
要拖动元素，我们可以使用 `position:fixed`，它使坐标更易于管理。最后，我们应该将其切换回 `position:absolute`，以使元素放置到文档中。
22

3-
然后，当坐标位于窗口顶部/底部时，我们使用 `window.scrollTo` 滚动它。
3+
当坐标位于窗口顶端/底端时，我们使用 `window.scrollTo` 来滚动它。
44

5-
注释中有更多关于代码的细节。
5+
更多细节请见代码注释。

‎2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/index.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@
88

99
<body>
1010

11-
<h2>Place superheroes around the soccer field.</h2>
11+
<h2>将超级英雄放置在足球场周围。</h2>
1212

13-
<p>Superheroes and the ball are elements with the class "draggable". Make them really draggable.</p>
13+
<p>超级英雄和球都是带有 "draggable" 类的元素。使它们真的可拖动（draggable）。</p>
1414

15-
<p>Important: limit dragging by the window. If a draggable reaches window top or bottom, then the page should scroll to let us drag it further.</p>
15+
<p>重要：通过窗口限制拖动。如果可拖动的元素被拖到窗口的顶端或末端，则页面应该滚动以让我们进一步拖动它。</p>
1616

17-
<p>If your screen is big enough to fit the whole document -- make the window smaller to get vertical scrolling, so that you could test it.</p>
17+
<p>如果你的屏幕足够大，能够把整个文档都显示出来 —— 那么请缩小窗口以进行垂直滚动，以便对此进行测试。</p>
1818

19-
<p>In this task it's enough to handle vertical scrolling. There's no horizontal scrolling usually, and it's handled the similar way if needed.</p>
19+
<p>在此任务中，处理垂直滚动就够了。通常没有水平滚动，并且在需要时可以采用类似的方式进行处理。</p>
2020

21-
<p>And one more thing: heroes may never leave the page. If they reach the edge of the document, no dragging outside of it.</p>
21+
<p>此外：英雄永远都不会离开页面。如果它们到达了文档的边缘，它们不会被拖动到文档外。</p>
2222

2323
<div id="field">
2424

0 commit comments

Comments
 (0)