Skip to content

Commit baf9e25

Browse files
jaywcjlovejaywcjlove
committed
doc: add ondblclick/ondrag document.
1 parent 1c99657 commit baf9e25

File tree

3 files changed

+178
-10
lines changed

3 files changed

+178
-10
lines changed

‎.idoc/.filesStat.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3672,15 +3672,15 @@
36723672
"birthtime": "2022-04-24T09:57:42.250Z"
36733673
},
36743674
"docs/attribute/ondblclick.md": {
3675-
"atime": "2022-04-29T15:27:17.106Z",
3676-
"mtime": "2022-04-29T15:26:49.653Z",
3677-
"ctime": "2022-04-29T15:26:49.653Z",
3675+
"atime": "2022-06-26T13:31:00.205Z",
3676+
"mtime": "2022-06-26T13:31:00.629Z",
3677+
"ctime": "2022-06-26T13:31:00.629Z",
36783678
"birthtime": "2022-04-24T09:57:42.250Z"
36793679
},
36803680
"docs/attribute/ondrag.md": {
3681-
"atime": "2022-04-29T15:27:16.376Z",
3682-
"mtime": "2022-04-29T15:26:49.513Z",
3683-
"ctime": "2022-04-29T15:26:49.513Z",
3681+
"atime": "2022-06-26T13:42:11.126Z",
3682+
"mtime": "2022-06-26T13:42:11.065Z",
3683+
"ctime": "2022-06-26T13:42:11.065Z",
36843684
"birthtime": "2022-04-24T09:57:42.250Z"
36853685
},
36863686
"docs/attribute/ondragend.md": {

‎docs/attribute/ondblclick.md

Lines changed: 74 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,76 @@
1-
ondblclick.md
1+
HTML ondblclick 属性
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/attribute/ondblclick.md">docs/attribute/ondblclick.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 定义和用法
5+
6+
`ondblclick` 属性在鼠标双击元素时触发。
7+
8+
## 适用于
9+
10+
`ondblclick` 属性是 [事件属性](../reference/attributes.md) 的一部分，可用于任何 HTML 元素。
11+
12+
| 元素 | 事件 |
13+
| --- | --- |
14+
| 所有 HTML 元素 | [ondblclick](../events/ondblclick.md) |
15+
<!--rehype:style=width: 100%; display: inline-table;-->
16+
17+
## 示例
18+
19+
### Button 示例
20+
21+
双击按钮时执行 JavaScript：
22+
23+
```html
24+
<button ondblclick="myFunction()">双击我</button>
25+
```
26+
27+
```html idoc:preview:iframe
28+
<button ondblclick="myFunction()">双击我</button>
29+
30+
<p id="demo"></p>
31+
32+
<p>双击按钮时触发一个函数。 该函数在 id="demo" 的 p 元素中输出一些文本。</p>
33+
34+
<script>
35+
function myFunction() {
36+
document.getElementById("demo").innerHTML = "Hello World";
37+
}
38+
</script>
39+
```
40+
41+
### P 示例
42+
43+
双击 \<p> 元素将其文本颜色更改为红色：
44+
45+
```html
46+
<p id="demo" ondblclick="myFunction()">双击我以更改我的文本颜色。</p>
47+
48+
<script>
49+
function myFunction() {
50+
document.getElementById("demo").style.color = "red";
51+
}
52+
</script>
53+
```
54+
55+
```html idoc:preview:iframe
56+
<p id="demo" ondblclick="myFunction()">双击我以更改我的文本颜色。</p>
57+
58+
<script>
59+
function myFunction() {
60+
document.getElementById("demo").style.color = "red";
61+
}
62+
</script>
63+
```
64+
65+
## 浏览器支持
66+
67+
| 事件属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
68+
| --- | --- | --- | --- | --- | --- |
69+
| ondblclick | Yes | Yes | Yes | Yes | Yes |
70+
<!--rehype:style=width: 100%; display: inline-table;-->
71+
72+
[1]: ../assets/chrome.svg
73+
[2]: ../assets/edge.svg
74+
[3]: ../assets/firefox.svg
75+
[4]: ../assets/safari.svg
76+
[5]: ../assets/opera.svg

‎docs/attribute/ondrag.md

Lines changed: 98 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,100 @@
1-
ondrag.md
1+
HTML ondrag 属性
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/attribute/ondrag.md">docs/attribute/ondrag.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 定义和用法
5+
6+
拖动元素或文本选择时会触发 `ondrag` 属性。
7+
8+
要了解拖放，请阅读我们关于 [HTML5 拖放](../tutorial/draganddrop.md) 的 HTML 教程。
9+
10+
**提示：** 链接和图片默认可拖动，不需要 [`draggable`](../attribute/draggable.md) 属性。
11+
12+
在拖放操作的不同阶段使用并可能发生许多事件属性：
13+
14+
* **在可拖动目标上触发的事件**（源元素）**：**
15+
16+
* [`ondragstart`](./ondragstart.md) - 当用户开始拖动元素时触发
17+
* [`ondrag`](./ondrag.md) - 拖动元素时触发
18+
* [`ondragend`](./ondragend.md) - 当用户完成拖动元素时触发
19+
20+
* **在放置目标上触发的事件：**
21+
22+
* [`ondragenter`](./ondragenter.md) - 当被拖动的元素进入放置目标时触发
23+
* [`ondragover`](./ondragover.md) - 当拖动的元素在放置目标上方时触发
24+
* [`ondragleave`](./ondragleave.md) - 当被拖动的元素离开放置目标时触发
25+
* [`ondrop`](./ondrop.md) - 当被拖动的元素放在放置目标上时触发
26+
27+
**注意：** 拖动元素时，`ondrag` 事件每 350 毫秒触发一次。
28+
29+
## 适用于
30+
31+
`ondrag` 属性是 [事件属性](../reference/attributes.md) 的一部分，可用于任何 HTML 元素。
32+
33+
| 元素 | 事件 |
34+
| --- | --- |
35+
| 所有 HTML 元素 | [ondrag](../events/ondrag.md) |
36+
<!--rehype:style=width: 100%; display: inline-table;-->
37+
38+
## 示例
39+
40+
在拖动 \<p> 元素时执行 JavaScript：
41+
42+
```html
43+
<p draggable="true" ondrag="myFunction(event)">Drag me!\</p>
44+
```
45+
46+
47+
```html idoc:preview:iframe
48+
<style>
49+
.droptarget {
50+
float: left;
51+
width: 100px;
52+
height: 35px;
53+
margin: 15px;
54+
padding: 10px;
55+
border: 1px solid #aaaaaa;
56+
}
57+
</style>
58+
<p>在两个矩形之间来回拖动 p 元素：</p>
59+
60+
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
61+
<p ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" id="dragtarget">拖我一把！</p>
62+
</div>
63+
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
64+
<p style="clear:both;" id="demo"></p>
65+
<script>
66+
function dragStart(event) {
67+
event.dataTransfer.setData("Text", event.target.id);
68+
}
69+
70+
function dragging(event) {
71+
document.getElementById("demo").innerHTML = "p 元素被拖动";
72+
}
73+
74+
function allowDrop(event) {
75+
event.preventDefault();
76+
}
77+
78+
function drop(event) {
79+
event.preventDefault();
80+
var data = event.dataTransfer.getData("Text");
81+
event.target.appendChild(document.getElementById(data));
82+
document.getElementById("demo").innerHTML = "p 元素被删除";
83+
}
84+
</script>
85+
```
86+
87+
## 浏览器支持
88+
89+
表中的数字指定了第一个完全支持事件属性的浏览器版本。
90+
91+
| 事件属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
92+
| --- | --- | --- | --- | --- | --- |
93+
| ondrag | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
94+
<!--rehype:style=width: 100%; display: inline-table;-->
95+
96+
[1]: ../assets/chrome.svg
97+
[2]: ../assets/edge.svg
98+
[3]: ../assets/firefox.svg
99+
[4]: ../assets/safari.svg
100+
[5]: ../assets/opera.svg

0 commit comments

Comments
 (0)