Skip to content

Commit 1c99657

Browse files
jaywcjlovejaywcjlove
committed
doc: add oncut/oncuechange/oncopy/oncontextmenu/onclick document.
1 parent a6f9f68 commit 1c99657

File tree

9 files changed

+377
-43
lines changed

9 files changed

+377
-43
lines changed

‎.idoc/.filesStat.json

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3612,63 +3612,63 @@
36123612
"birthtime": "2022-05-29T10:18:16.994Z"
36133613
},
36143614
"docs/attribute/onblur.md": {
3615-
"atime": "2022-05-29T10:18:17.130Z",
3616-
"mtime": "2022-05-29T10:18:16.994Z",
3617-
"ctime": "2022-05-29T10:18:16.994Z",
3615+
"atime": "2022-06-26T13:21:00.627Z",
3616+
"mtime": "2022-06-26T13:21:00.595Z",
3617+
"ctime": "2022-06-26T13:21:00.595Z",
36183618
"birthtime": "2022-05-29T10:18:16.994Z"
36193619
},
36203620
"docs/attribute/oncanplay.md": {
3621-
"atime": "2022-05-29T10:18:17.135Z",
3622-
"mtime": "2022-05-29T10:18:16.995Z",
3623-
"ctime": "2022-05-29T10:18:16.995Z",
3621+
"atime": "2022-06-26T13:20:57.577Z",
3622+
"mtime": "2022-06-26T13:20:57.466Z",
3623+
"ctime": "2022-06-26T13:20:57.466Z",
36243624
"birthtime": "2022-05-29T10:18:16.994Z"
36253625
},
36263626
"docs/attribute/onbeforeunload.md": {
3627-
"atime": "2022-05-29T10:18:17.221Z",
3628-
"mtime": "2022-05-29T10:18:16.994Z",
3629-
"ctime": "2022-05-29T10:18:16.994Z",
3627+
"atime": "2022-06-26T13:21:03.622Z",
3628+
"mtime": "2022-06-26T13:21:03.600Z",
3629+
"ctime": "2022-06-26T13:21:03.600Z",
36303630
"birthtime": "2022-05-29T10:18:16.994Z"
36313631
},
36323632
"docs/attribute/oncanplaythrough.md": {
3633-
"atime": "2022-06-26T03:44:36.674Z",
3634-
"mtime": "2022-06-26T03:44:37.180Z",
3635-
"ctime": "2022-06-26T03:44:37.180Z",
3633+
"atime": "2022-06-26T13:20:52.624Z",
3634+
"mtime": "2022-06-26T13:20:52.552Z",
3635+
"ctime": "2022-06-26T13:20:52.552Z",
36363636
"birthtime": "2022-04-24T09:54:54.966Z"
36373637
},
36383638
"docs/attribute/onchange.md": {
3639-
"atime": "2022-06-26T04:01:09.500Z",
3640-
"mtime": "2022-06-26T04:01:09.714Z",
3641-
"ctime": "2022-06-26T04:01:09.714Z",
3639+
"atime": "2022-06-26T04:02:01.830Z",
3640+
"mtime": "2022-06-26T13:20:49.112Z",
3641+
"ctime": "2022-06-26T13:20:49.112Z",
36423642
"birthtime": "2022-04-24T09:54:54.966Z"
36433643
},
36443644
"docs/attribute/onclick.md": {
3645-
"atime": "2022-04-29T15:27:16.552Z",
3646-
"mtime": "2022-04-29T15:26:49.650Z",
3647-
"ctime": "2022-04-29T15:26:49.650Z",
3645+
"atime": "2022-06-26T13:20:45.543Z",
3646+
"mtime": "2022-06-26T13:20:45.512Z",
3647+
"ctime": "2022-06-26T13:20:45.512Z",
36483648
"birthtime": "2022-04-24T09:54:54.966Z"
36493649
},
36503650
"docs/attribute/oncontextmenu.md": {
3651-
"atime": "2022-04-29T15:27:16.242Z",
3652-
"mtime": "2022-04-29T15:26:49.513Z",
3653-
"ctime": "2022-04-29T15:26:49.513Z",
3651+
"atime": "2022-06-26T13:20:41.026Z",
3652+
"mtime": "2022-06-26T13:20:41.275Z",
3653+
"ctime": "2022-06-26T13:20:41.275Z",
36543654
"birthtime": "2022-04-24T09:54:54.966Z"
36553655
},
36563656
"docs/attribute/oncopy.md": {
3657-
"atime": "2022-04-29T15:27:16.421Z",
3658-
"mtime": "2022-04-29T15:26:49.621Z",
3659-
"ctime": "2022-04-29T15:26:49.621Z",
3657+
"atime": "2022-06-26T13:21:52.664Z",
3658+
"mtime": "2022-06-26T13:21:52.666Z",
3659+
"ctime": "2022-06-26T13:21:52.666Z",
36603660
"birthtime": "2022-04-24T09:54:54.966Z"
36613661
},
36623662
"docs/attribute/oncuechange.md": {
3663-
"atime": "2022-04-29T15:27:16.442Z",
3664-
"mtime": "2022-04-29T15:26:49.578Z",
3665-
"ctime": "2022-04-29T15:26:49.578Z",
3663+
"atime": "2022-06-26T13:20:32.215Z",
3664+
"mtime": "2022-06-26T13:20:32.149Z",
3665+
"ctime": "2022-06-26T13:20:32.149Z",
36663666
"birthtime": "2022-04-24T09:54:54.967Z"
36673667
},
36683668
"docs/attribute/oncut.md": {
3669-
"atime": "2022-04-29T15:27:17.377Z",
3670-
"mtime": "2022-04-29T15:26:50.376Z",
3671-
"ctime": "2022-04-29T15:26:50.376Z",
3669+
"atime": "2022-06-26T13:23:12.688Z",
3670+
"mtime": "2022-06-26T13:23:12.759Z",
3671+
"ctime": "2022-06-26T13:23:12.759Z",
36723672
"birthtime": "2022-04-24T09:57:42.250Z"
36733673
},
36743674
"docs/attribute/ondblclick.md": {

‎docs/attribute/oncanplay.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ HTML oncanplay 属性
6565

6666
`oncanplay` 属性对每个元素都有以下浏览器支持：
6767

68-
| 元素 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
68+
| 事件属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
6969
| --- | --- | --- | --- | --- | --- |
7070
| audio | Yes | 9.0 | Yes | Yes | Yes |
7171
| embed | ❌ 不支持 | ❌ 不支持 | ❌ 不支持 | ❌ 不支持 | ❌ 不支持 |

‎docs/attribute/oncanplaythrough.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ HTML oncanplaythrough 属性
6666

6767
`oncanplaythrough` 属性对每个元素都有以下浏览器支持：
6868

69-
| 元素 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
69+
| 事件属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
7070
| --- | --- | --- | --- | --- | --- |
7171
| audio | Yes | 9.0 | Yes | Yes | Yes |
7272
| video | Yes | 9.0 | Yes | Yes | Yes |

‎docs/attribute/onchange.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ function myFunction(val) {
7070

7171
## 浏览器支持
7272

73-
| 元素 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
73+
| 事件属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
7474
| --- | --- | --- | --- | --- | --- |
7575
| onchange | Yes | Yes | Yes | Yes | Yes |
7676
<!--rehype:style=width: 100%; display: inline-table;-->

‎docs/attribute/onclick.md

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

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/attribute/onclick.md">docs/attribute/onclick.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 定义和用法
5+
6+
`onclick` 属性在鼠标点击元素时触发。
7+
8+
## 适用于
9+
10+
`onclick` 属性是 [事件属性](../reference/attributes.md) 的一部分，可用于任何 HTML 元素。
11+
12+
| 元素 | 事件 |
13+
| --- | --- |
14+
| 所有 HTML 元素 | [onclick](../events/onclick.md) |
15+
<!--rehype:style=width: 100%; display: inline-table;-->
16+
17+
## 示例
18+
19+
### Button 示例
20+
21+
单击按钮时执行 JavaScript：
22+
23+
```html
24+
<button onclick="myFunction()">点击我</button>
25+
```
26+
27+
```html idoc:preview:iframe
28+
<button onclick="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 idoc:preview:iframe
46+
<p id="demo" onclick="myFunction()">单击我以更改我的文本颜色。</p>
47+
48+
<script>
49+
function myFunction() {
50+
document.getElementById("demo").style.color = "red";
51+
}
52+
</script>
53+
```
54+
55+
## 浏览器支持
56+
57+
| 事件属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
58+
| --- | --- | --- | --- | --- | --- |
59+
| onclick | Yes | Yes | Yes | Yes | Yes |
60+
<!--rehype:style=width: 100%; display: inline-table;-->
61+
62+
63+
[1]: ../assets/chrome.svg
64+
[2]: ../assets/edge.svg
65+
[3]: ../assets/firefox.svg
66+
[4]: ../assets/safari.svg
67+
[5]: ../assets/opera.svg
68+
69+

‎docs/attribute/oncontextmenu.md

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

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/attribute/oncontextmenu.md">docs/attribute/oncontextmenu.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 定义和用法
5+
6+
`oncontextmenu` 属性在用户右键单击元素以打开上下文菜单时触发。
7+
8+
**注意：** 虽然所有浏览器都支持 `oncontextmenu` 事件，但目前只有 Firefox 支持 `contextmenu` 属性。
9+
10+
## 适用于
11+
12+
`oncontextmenu` 属性是 [事件属性](../reference/attributes.md) 的一部分，可用于任何 HTML 元素。
13+
14+
| 元素 | 事件 |
15+
| --- | --- |
16+
| 所有 HTML 元素 | [oncontextmenu](../events/oncontextmenu.md) |
17+
18+
### 示例
19+
20+
触发上下文菜单时执行 JavaScript：
21+
22+
23+
```html
24+
<div oncontextmenu="myFunction()" contextmenu="mymenu">
25+
```
26+
27+
```html idoc:preview:iframe
28+
<style>
29+
div {
30+
background: yellow;
31+
border: 1px solid black;
32+
padding: 10px;
33+
}
34+
</style>
35+
<div oncontextmenu="myFunction()" contextmenu="mymenu">
36+
<p>在此框内右键单击以查看上下文菜单！</p>
37+
38+
<menu type="context" id="mymenu">
39+
<menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
40+
<menu label="Share on...">
41+
<menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem>
42+
<menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
43+
</menu>
44+
<menuitem label="Email This Page" onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
45+
</menu>
46+
47+
</div>
48+
49+
<p><strong>注意：</strong> contextmenu <strong>属性</strong>仅适用于 Firefox！ </p>
50+
51+
<script>
52+
function myFunction() {
53+
alert("You right-clicked inside the div!");
54+
}
55+
</script>
56+
```
57+
58+
## 浏览器支持
59+
60+
| 事件属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
61+
| --- | --- | --- | --- | --- | --- |
62+
| oncontextmenu | Yes | Yes | Yes | Yes | Yes |
63+
<!--rehype:style=width: 100%; display: inline-table;-->
64+
65+
66+
[1]: ../assets/chrome.svg
67+
[2]: ../assets/edge.svg
68+
[3]: ../assets/firefox.svg
69+
[4]: ../assets/safari.svg
70+
[5]: ../assets/opera.svg
71+
72+
73+

‎docs/attribute/oncopy.md

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

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/attribute/oncopy.md">docs/attribute/oncopy.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 定义和用法
5+
6+
`oncopy` 属性在用户复制元素内容时触发。
7+
8+
**提示：** 当用户复制使用 `<img>` 元素创建的元素（例如图像）时，也会触发 `oncopy` 属性。
9+
10+
**提示：** `oncopy` 属性主要用于具有 `type="text"` 的 `<input>` 元素。
11+
12+
**提示：** 复制元素/元素内容的三种方式：
13+
14+
* 按 <kbd>CTRL</kbd> + <kbd>C</kbd>
15+
* 从浏览器的编辑菜单中选择“复制”
16+
* 右键单击显示上下文菜单并选择“复制”命令
17+
18+
## 适用于
19+
20+
`oncopy` 属性是 [事件属性](../reference/attributes.md) 的一部分，可用于任何 HTML 元素。
21+
22+
| 元素 | 事件 |
23+
| --- | --- |
24+
| 所有 HTML 元素 | [oncopy](../events/oncopy.md) |
25+
<!--rehype:style=width: 100%; display: inline-table;-->
26+
27+
## 示例
28+
29+
### Input 示例
30+
31+
在复制 \<input> 元素的某些文本时执行 JavaScript：
32+
33+
```html
34+
<input type="text" oncopy="myFunction()" value="尝试复制此文本">
35+
```
36+
37+
```html idoc:preview:iframe
38+
<input type="text" oncopy="myFunction()" value="尝试复制此文本">
39+
40+
<p id="demo"></p>
41+
42+
<script>
43+
function myFunction() {
44+
document.getElementById("demo").innerHTML = "你复制了文字！"
45+
}
46+
</script>
47+
```
48+
49+
### P 示例
50+
51+
在复制 \<p> 元素的某些文本时执行 JavaScript：
52+
53+
```html
54+
<p oncopy="myFunction()">尝试复制此文本</p>
55+
```
56+
57+
```html idoc:preview:iframe
58+
<p oncopy="myFunction()">尝试复制此文本</p>
59+
60+
<script>
61+
function myFunction() {
62+
alert("你复制了文字！");
63+
}
64+
</script>
65+
```
66+
67+
### Img 示例
68+
69+
复制图像时执行 JavaScript：
70+
71+
```html
72+
<img src="xxx.gif" oncopy="myFunction()">
73+
```
74+
75+
```html idoc:preview:iframe
76+
<p>尝试复制下面的图像（右键单击图像并选择“复制图像”）。</p>
77+
78+
<img src="../assets/editors-001.png" oncopy="myFunction()" alt="editors image" height="150">
79+
80+
<p><strong>笔记：</strong> 此示例在某些浏览器中可能无法按预期工作。</p>
81+
82+
<script>
83+
function myFunction() {
84+
alert("你复制了图片！");
85+
}
86+
</script>
87+
```
88+
89+
## 浏览器支持
90+
91+
| 事件属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
92+
| --- | --- | --- | --- | --- | --- |
93+
| oncopy | Yes | Yes | Yes | Yes | Yes |
94+
<!--rehype:style=width: 100%; display: inline-table;-->
95+
96+
**注意：** 在尝试复制图像时，oncopy 属性在某些浏览器中可能无法正常工作（参见上面的示例）。
97+
98+
[1]: ../assets/chrome.svg
99+
[2]: ../assets/edge.svg
100+
[3]: ../assets/firefox.svg
101+
[4]: ../assets/safari.svg
102+
[5]: ../assets/opera.svg
103+
104+

0 commit comments

Comments
 (0)