定义和使用

只要点击鼠标右键，就触发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. 设计模式之状态模式（State Pattern）

    一.什么是状态模式? 把所有动作都封装在状态对象中,状态持有者将行为委托给当前状态对象 也就是说,状态持有者(比如汽车,电视,ATM机都有多个状态)并不知道动作细节,状态持有者只关心自己当前所处的状态 ...

  2. S11 day 93 RestFramework 之 序列化

    1. 表建模 from django.db import models # Create your models here. #文章表 class Article(models.Model): tit ...

  3. Mac OS 10.12 - 在VMwear Workstation12.5.2中大写键和中英文输入法的切换！

    大小写切换: Alt+CapsLock(不过必须在英文状态下)!! 输入法切换: CapsLock进行中英文输入法的切换

  4. poj3026

    Borg Maze Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12952   Accepted: 4227 Descri ...

  5. POJ 3468A Simple Problem with Integers(线段树区间更新)

    A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 112228 ...

  6. 读DEDECMS找后台目录有感

    本文作者:红日安全团队——Mochazz 早上看了先知论坛的这篇文章:解决DEDECMS历史难题–找后台目录 不得不说作者思路确实巧妙,作者巧妙的利用了Windows FindFirstFile和织梦 ...

  7. elasticsearch 导入基础数据并索引之 geo_point

    elasticsearch 中的地理信息存储, 有geo_point形式和geo_shape两种形式 此篇只叙述geo_point, 地理位置需要声明为特殊的类型, 不显示在mapping中定义的话, ...

  8. Ubuntu16.04安装使用Consul

    Consul 是 HashiCorp 公司推出的开源工具,用于实现分布式系统的服务发现与配置.与其他分布式服务注册与发现的方案,比如 Airbnb 的 SmartStack 等相比,Consul 的方 ...

  9. 部署虚拟环境安装Linux系统

      目录                                                              准备工作 安装linux系统 重置root管理员密码 源代码编译 R ...

  10. 微信小程序web-view(webview) 嵌套H5页面 唤起微信支付的实现方案

    场景:小程序页面有一个web-view组件,组件嵌套的H5页面,要唤起微信支付. 先讲一下我的项目,首先我是自己开发的一个H5触屏版的商城系统,里面含有购物车,订单支付等功能.然后刚开始,我们公众号里 ...