熟悉一下oncontextmenu事件的知识
生活随笔
收集整理的這篇文章主要介紹了
熟悉一下oncontextmenu事件的知识
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
定義和使用
只要點擊鼠標右鍵，就觸發oncontextmenu事件并打開上下文菜單。
需要注意的是：所有主流瀏覽器都支持oncontextmenu事件，但其中的contextmenu元素只有FireBox支持。
兼容性
?
語法
1、沒有添加contextmenu元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>oncontextmenu事件</title> <style> div {background: yellow;border: 1px solid black;padding: 10px; } </style> </head> <body><p>該實例使用了 addEventListener() 方法向 div 元素添加 "contextmenu" 事件。</p> <div id="myDIV" contextmenu="mymenu"> <p>在框中點擊鼠標右鍵查看上下文菜單！</p></div> <p id="demo"></p> <script> document.getElementById("myDIV").addEventListener("contextmenu", myFunction); function myFunction() {var x = document.getElementById("demo");x.innerHTML = "你在 div 中點擊了鼠標右鍵!";x.style.fontSize = "30px"; } </script> <p><strong>注意：</strong> 只有 Firefox 中支持 contextmenu <strong>屬性</strong> !</p></body> </html>2、添加了contextmenu元素后
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>oncontextmenu事件</title> <style> div {background: yellow;border: 1px solid black;padding: 10px; } </style> </head> <body><p>該實例使用了 addEventListener() 方法向 div 元素添加 "contextmenu" 事件。</p> <div id="myDIV" contextmenu="mymenu"> <p>在框中點擊鼠標右鍵查看上下文菜單！</p> <menu type="context" id="mymenu"><menuitem label="刷新" onclick="window.location.reload();" icon="ico_reload.png"></menuitem><menu label="分享"><menuitem label="百度" icon="ico_twitter.png" onclick="window.open('https://www.baidu.com');"></menuitem><menuitem label="博客" icon="ico_facebook.png" onclick="window.open('https://cnblogs.com/murenziwei');"></menuitem></menu> </menu> </div> <p id="demo"></p> <script> document.getElementById("myDIV").addEventListener("contextmenu", myFunction); function myFunction() {var x = document.getElementById("demo");x.innerHTML = "你在 div 中點擊了鼠標右鍵!";x.style.fontSize = "30px"; } </script> <p><strong>注意：</strong> 只有 Firefox 中支持 contextmenu <strong>屬性</strong> !</p></body> </html>注意：Internet Explorer8以下瀏覽器不支持addEventListener()。
?
轉載于:https://www.cnblogs.com/murenziwei/p/9216027.html
總結
以上是生活随笔為你收集整理的熟悉一下oncontextmenu事件的知识的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 剑指Offer：合并两个排序的链表【25
- 下一篇： 剑指Offer：反转链表【24】