zoukankan      html  css  js  c++  java
  • 熟悉一下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()。

  • 相关阅读:
    Tribonacci UVA 12470 (简单的斐波拉契数列)(矩阵快速幂)
    P1091 合唱队形
    P1481 魔族密码 (LIS)
    xiaowuga poj3735—Training little cats(特殊操作转化为矩阵操作)
    P2665 [USACO08FEB]连线游戏Game of Lines
    1875 丢手绢 (模拟+打表)
    Recurrences UVA 10870 (斐波拉契的一般形式推广)
    Choosing number ZOJ 3690 (矩阵快速幂)
    根据屏幕文件生成RPG代码的思路
    基于配置文件的查询,xml文件sample
  • 原文地址:https://www.cnblogs.com/murenziwei/p/9216027.html
Copyright © 2011-2022 走看看