-
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
doc: add oncut/oncuechange/oncopy/oncontextmenu/onclick document.
- Loading branch information
1 parent
a6f9f68
commit 1c99657
Showing
9 changed files
with
377 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,69 @@ | ||
| onclick.md | ||
| HTML onclick 属性 | ||
| === | ||
|
|
||
| 欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/attribute/onclick.md">docs/attribute/onclick.md</a> 文件，共建 HTML Tutorial 文档。 | ||
| ## 定义和用法 | ||
|
|
||
| `onclick` 属性在鼠标点击元素时触发。 | ||
|
|
||
| ## 适用于 | ||
|
|
||
| `onclick` 属性是 [事件属性](../reference/attributes.md) 的一部分，可用于任何 HTML 元素。 | ||
|
|
||
| | 元素 | 事件 | | ||
| | --- | --- | | ||
| | 所有 HTML 元素 | [onclick](../events/onclick.md) | | ||
| <!--rehype:style=width: 100%; display: inline-table;--> | ||
|
|
||
| ## 示例 | ||
|
|
||
| ### Button 示例 | ||
|
|
||
| 单击按钮时执行 JavaScript： | ||
|
|
||
| ```html | ||
| <button onclick="myFunction()">点击我</button> | ||
| ``` | ||
|
|
||
| ```html idoc:preview:iframe | ||
| <button onclick="myFunction()">点击我</button> | ||
|
|
||
| <p id="demo"></p> | ||
|
|
||
| <p>单击按钮时会触发一个函数。 该函数在 id="demo" 的 p 元素中输出一些文本。</p> | ||
|
|
||
| <script> | ||
| function myFunction() { | ||
| document.getElementById("demo").innerHTML = "Hello World"; | ||
| } | ||
| </script> | ||
| ``` | ||
|
|
||
| ### P 示例 | ||
|
|
||
| 单击 \<p> 元素将其文本颜色更改为红色： | ||
|
|
||
| ```html idoc:preview:iframe | ||
| <p id="demo" onclick="myFunction()">单击我以更改我的文本颜色。</p> | ||
|
|
||
| <script> | ||
| function myFunction() { | ||
| document.getElementById("demo").style.color = "red"; | ||
| } | ||
| </script> | ||
| ``` | ||
|
|
||
| ## 浏览器支持 | ||
|
|
||
| | 事件属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] | | ||
| | --- | --- | --- | --- | --- | --- | | ||
| | onclick | Yes | Yes | Yes | Yes | Yes | | ||
| <!--rehype:style=width: 100%; display: inline-table;--> | ||
|
|
||
|
|
||
| [1]: ../assets/chrome.svg | ||
| [2]: ../assets/edge.svg | ||
| [3]: ../assets/firefox.svg | ||
| [4]: ../assets/safari.svg | ||
| [5]: ../assets/opera.svg | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,73 @@ | ||
| oncontextmenu.md | ||
| HTML oncontextmenu 属性 | ||
| === | ||
|
|
||
| 欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/attribute/oncontextmenu.md">docs/attribute/oncontextmenu.md</a> 文件，共建 HTML Tutorial 文档。 | ||
| ## 定义和用法 | ||
|
|
||
| `oncontextmenu` 属性在用户右键单击元素以打开上下文菜单时触发。 | ||
|
|
||
| **注意：** 虽然所有浏览器都支持 `oncontextmenu` 事件，但目前只有 Firefox 支持 `contextmenu` 属性。 | ||
|
|
||
| ## 适用于 | ||
|
|
||
| `oncontextmenu` 属性是 [事件属性](../reference/attributes.md) 的一部分，可用于任何 HTML 元素。 | ||
|
|
||
| | 元素 | 事件 | | ||
| | --- | --- | | ||
| | 所有 HTML 元素 | [oncontextmenu](../events/oncontextmenu.md) | | ||
|
|
||
| ### 示例 | ||
|
|
||
| 触发上下文菜单时执行 JavaScript： | ||
|
|
||
|
|
||
| ```html | ||
| <div oncontextmenu="myFunction()" contextmenu="mymenu"> | ||
| ``` | ||
|
|
||
| ```html idoc:preview:iframe | ||
| <style> | ||
| div { | ||
| background: yellow; | ||
| border: 1px solid black; | ||
| padding: 10px; | ||
| } | ||
| </style> | ||
| <div oncontextmenu="myFunction()" contextmenu="mymenu"> | ||
| <p>在此框内右键单击以查看上下文菜单！</p> | ||
|
|
||
| <menu type="context" id="mymenu"> | ||
| <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem> | ||
| <menu label="Share on..."> | ||
| <menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem> | ||
| <menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem> | ||
| </menu> | ||
| <menuitem label="Email This Page" onclick="window.location='mailto:?body='+window.location.href;"></menuitem> | ||
| </menu> | ||
|
|
||
| </div> | ||
|
|
||
| <p><strong>注意：</strong> contextmenu <strong>属性</strong>仅适用于 Firefox！ </p> | ||
|
|
||
| <script> | ||
| function myFunction() { | ||
| alert("You right-clicked inside the div!"); | ||
| } | ||
| </script> | ||
| ``` | ||
|
|
||
| ## 浏览器支持 | ||
|
|
||
| | 事件属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] | | ||
| | --- | --- | --- | --- | --- | --- | | ||
| | oncontextmenu | Yes | Yes | Yes | Yes | Yes | | ||
| <!--rehype:style=width: 100%; display: inline-table;--> | ||
|
|
||
|
|
||
| [1]: ../assets/chrome.svg | ||
| [2]: ../assets/edge.svg | ||
| [3]: ../assets/firefox.svg | ||
| [4]: ../assets/safari.svg | ||
| [5]: ../assets/opera.svg | ||
|
|
||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,104 @@ | ||
| oncopy.md | ||
| HTML oncopy 属性 | ||
| === | ||
|
|
||
| 欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/attribute/oncopy.md">docs/attribute/oncopy.md</a> 文件，共建 HTML Tutorial 文档。 | ||
| ## 定义和用法 | ||
|
|
||
| `oncopy` 属性在用户复制元素内容时触发。 | ||
|
|
||
| **提示：** 当用户复制使用 `<img>` 元素创建的元素（例如图像）时，也会触发 `oncopy` 属性。 | ||
|
|
||
| **提示：** `oncopy` 属性主要用于具有 `type="text"` 的 `<input>` 元素。 | ||
|
|
||
| **提示：** 复制元素/元素内容的三种方式： | ||
|
|
||
| * 按 <kbd>CTRL</kbd> + <kbd>C</kbd> | ||
| * 从浏览器的编辑菜单中选择“复制” | ||
| * 右键单击显示上下文菜单并选择“复制”命令 | ||
|
|
||
| ## 适用于 | ||
|
|
||
| `oncopy` 属性是 [事件属性](../reference/attributes.md) 的一部分，可用于任何 HTML 元素。 | ||
|
|
||
| | 元素 | 事件 | | ||
| | --- | --- | | ||
| | 所有 HTML 元素 | [oncopy](../events/oncopy.md) | | ||
| <!--rehype:style=width: 100%; display: inline-table;--> | ||
|
|
||
| ## 示例 | ||
|
|
||
| ### Input 示例 | ||
|
|
||
| 在复制 \<input> 元素的某些文本时执行 JavaScript： | ||
|
|
||
| ```html | ||
| <input type="text" oncopy="myFunction()" value="尝试复制此文本"> | ||
| ``` | ||
|
|
||
| ```html idoc:preview:iframe | ||
| <input type="text" oncopy="myFunction()" value="尝试复制此文本"> | ||
|
|
||
| <p id="demo"></p> | ||
|
|
||
| <script> | ||
| function myFunction() { | ||
| document.getElementById("demo").innerHTML = "你复制了文字！" | ||
| } | ||
| </script> | ||
| ``` | ||
|
|
||
| ### P 示例 | ||
|
|
||
| 在复制 \<p> 元素的某些文本时执行 JavaScript： | ||
|
|
||
| ```html | ||
| <p oncopy="myFunction()">尝试复制此文本</p> | ||
| ``` | ||
|
|
||
| ```html idoc:preview:iframe | ||
| <p oncopy="myFunction()">尝试复制此文本</p> | ||
|
|
||
| <script> | ||
| function myFunction() { | ||
| alert("你复制了文字！"); | ||
| } | ||
| </script> | ||
| ``` | ||
|
|
||
| ### Img 示例 | ||
|
|
||
| 复制图像时执行 JavaScript： | ||
|
|
||
| ```html | ||
| <img src="xxx.gif" oncopy="myFunction()"> | ||
| ``` | ||
|
|
||
| ```html idoc:preview:iframe | ||
| <p>尝试复制下面的图像（右键单击图像并选择“复制图像”）。</p> | ||
|
|
||
| <img src="../assets/editors-001.png" oncopy="myFunction()" alt="editors image" height="150"> | ||
|
|
||
| <p><strong>笔记：</strong> 此示例在某些浏览器中可能无法按预期工作。</p> | ||
|
|
||
| <script> | ||
| function myFunction() { | ||
| alert("你复制了图片！"); | ||
| } | ||
| </script> | ||
| ``` | ||
|
|
||
| ## 浏览器支持 | ||
|
|
||
| | 事件属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] | | ||
| | --- | --- | --- | --- | --- | --- | | ||
| | oncopy | Yes | Yes | Yes | Yes | Yes | | ||
| <!--rehype:style=width: 100%; display: inline-table;--> | ||
|
|
||
| **注意：** 在尝试复制图像时，oncopy 属性在某些浏览器中可能无法正常工作（参见上面的示例）。 | ||
|
|
||
| [1]: ../assets/chrome.svg | ||
| [2]: ../assets/edge.svg | ||
| [3]: ../assets/firefox.svg | ||
| [4]: ../assets/safari.svg | ||
| [5]: ../assets/opera.svg | ||
|
|
||
|
|
Oops, something went wrong.