定义和使用

只要点击鼠标右键，就触发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()。

熟悉一下oncontextmenu事件的知识的更多相关文章

  1. （转载）AS3.0实例学习 熟悉新的事件机制和addChild的运用

    (转载)http://www.jb51.net/article/13139.htm 首先声明:本人大菜鸟一个,刚接触AS3不久,许多理念还没来得及灌输,这些case都是从网上down的,但因为解说是英 ...

  2. OnContextMenu事件(转)

    用oncontextmenu事件单禁用右键菜单 一个页面中,BODY中用oncontextmenu='return false'来取消鼠标右键:在JS中设置oncontextmenu='return ...

  3. js事件(Event)知识整理

    事件(Event)知识整理,本文由网上资料整理而来,需要的朋友可以参考下   鼠标事件 鼠标移动到目标元素上的那一刻,首先触发mouseover 之后如果光标继续在元素上移动,则不断触发mousemo ...

  4. js事件(Event)知识整理[转]

    事件注册 平常我们绑定事件的时候用dom.onxxxx=function(){}的形式 这种方式是给元素的onxxxx属性赋值,只能绑定有一个处理句柄. 但很多时候我们需要绑定多个处理句柄到一个事件上 ...

  5. DOM0,DOM2,DOM3 事件基础知识

    事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM ...

  6. oncontextmenu事件

    oncontextmenu的作用是阻止浏览器默认的鼠标右键行为. 阻止弹出右键自带菜单 document.oncontextmenu=function(){ console.log('你点击了右键') ...

  7. DOM0,DOM2,DOM3事件,事件基础知识入门

    事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM ...

  8. JavaScript事件基础知识总结【思维导图】

    另外附上来自Nicholas C.Zakas<JavaScript高级程序设计 第3版>中的跨浏览器兼容EventUtil对象. var EventUtil = { //注册事件 addH ...

  9. js鼠标事件相关知识

    1.mousedown->mouseup依次触发后相当于click事件 2.除了mouseenter和mouseleave外,其它的鼠标事件都是冒泡的 3.mouseover和mouseout事 ...

随机推荐

  1. navigationController背景图,文字，事件定义

    //设置背景图片 [self.navigationController.navigationBar setBackgroundImage:imag forBarMetrics:UIBarMetrics ...

  2. 对Cookie和Session的理解

    本篇文章系自己总结经验,如果有朋友感觉哪里有问题,欢迎留言评论,谢谢~! Cookie和Session的产生背景: 在动态页面里面,每个变量都是有有效期的,所有的变量的最大生命周期就是一个脚本的周期( ...

  3. Python3------装饰器详解

    装饰器 定义:本质是函数.(装饰其他函数)就是为其他函数添加附加功能 原则:1.不能修改被装饰的函数的源代码 2.不能修改被装饰的函数的调用方式 理解装饰器前提条件: 1.函数即"变量&qu ...

  4. TCP BBR - 一键安装最新内核并开启 TCP BBR

    原文地址: https://teddysun.com/489.html 最近,Google 开源了其 TCP BBR 拥塞控制算法,并提交到了 Linux 内核,从 4.9 开始,Linux 内核已经 ...

  5. JavaScript函数学习总结(一)---函数定义

    博客原文地址:Claiyre的个人博客 如需转载,请在文章开头注明原文地址 在许多传统的OO语言中,对象可以包含数据,还可拥有方法,也就是属于该对象的函数.但在JavaScript中,函数也被认为是一 ...

  6. 大数据技术之_19_Spark学习_01_Spark 基础解析小结（无图片）

    1.准备安装包 2.Spark Standalone 即独立模式  2.1.解压安装包到你安装的目录.  2.2.拷贝 conf 目录下的 slaves 文件,将 slave 节点的 hostname ...

  7. 【NOIP2017】 宝藏 状压dp

    为啥我去年这么菜啊..... 我现在想了$20min$后打了$10min$就过了$qwq$. 我们用$f[i][j]$表示当前深度为$i$,访问了状态$j$中的所有点的最小代价. 显然$f[i][j] ...

  8. 如何正确的加载和执行 JavaScript 代码

    无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载和执行 ...

  9. rabbitmq使用日记

    一.安装 添加安装源 #echo 'deb http://www.rabbitmq.com/debian/ testing main' | sudo tee /etc/apt/sources.list ...

  10. 原生Js弹窗插件|web弹出层组件|对话框

    wcPop.js 是一款基于原生javascript开发的前端 web版 弹窗组件,遵循原生 H5/css3/JS 的书写规范,简单实用.拿来即用(压缩后仅10KB).已经兼容各大主流浏览器.内含多种 ...