定义和使用

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

    查看js的有效使用情况: https://github.com/gmetais/unusedjs Installation You need to open your console and writ ...

  2. spring注入是否会被回收

    在做jms的时候,调用到其他的接口来进行数据库操作. 如果不进行数据库操作的话,jms信息队列都是正常的.但是用的spring注入的接口进行操作的时候,当信息较多的时候,注入的这个接口会变成null. ...

  3. vux 入门备忘大佬多指点

    一.安装node.js https://nodejs.org/en/ 这样就可以使用npm喽 二.安装vux 安装vux npm install vux --save 安装vux-loader npm ...

  4. 守护进程与Supervisor

    博客链接:http://www.cnblogs.com/zhenghongxin/p/8676565.html 消息队列处理后台任务带来的问题 在系统稍微大些的时候,我们经常会用到消息队列(实现的方式 ...

  5. 预处理函数在app和蓝图级别的不同使用

    app级别 from flask import Flask from flask_sqlalchemy import SQLAlchemy # SQLAlchemy 类实例对象的创建一定要在引用蓝图之 ...

  6. django 使用celery 实现异步任务

    celery 情景:用户发起request,并等待response返回.在本些views中,可能需要执行一段耗时的程序,那么用户就会等待很长时间,造成不好的用户体验,比如发送邮件.手机验证码等. 使用 ...

  7. [CSS3] 几种分割线实现方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Android启动过程介绍

    开机过程大致可以分为以下三个阶段 OS级别 由bootloader载入linux kernel后,kernel开始初始化, 并载入built-in的驱动程序.Kernel完成开机后,载入init pr ...

  9. D04——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D04         20180810内容纲要: 1 内置函数 2 装饰器 3 生成器 4 迭代器 5 软件目录结构规范 6 小结 1 内置函数 内置函数方法详 ...

  10. js的let语句在安卓手机端的QQ浏览器出错的问题

    关于JavaScript里面的let,let 语句可以声明一个块级作用域的本地变量,并且可选的将其初始化为一个值. <ul id="list"> </ul> ...