定义和使用

只要点击鼠标右键，就触发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. LeetCode137：Single Number II

    题目: Given an array of integers, every element appears three times except for one. Find that single o ...

  2. 使用ABP框架踩过的坑系列4

    数据库连接和事务管理,是数据库应用中的最重要概念之一.做过的人,都会头疼:何时Open一个连接?何时Start一个事务?何时Dispose这个连接?... ABP框架试图用一个叫做UnitOfWork ...

  3. update from用法

    from:https://www.cnblogs.com/zerocc/archive/2011/11/01/2231841.html update 表名 SET  更新字段 FROM 更新表名(多个 ...

  4. Elasticsearch、Kibana Windows下环境搭建

    Elasticsearch 簡介 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是 ...

  5. Masnory 学习

    1:typeof <一元运算符,放在一个运算数之前,运算数可以是任何类型, 用于获取括号中的运算数的数据类型如:NSString CGFloat Int NSArray等> 2:  str ...

  6. 前端入门CSS(3)

    day60 不透明度 opacity()\ opacity (不透明度)             1. 取值0~1             2. 和rgba()的区别:                ...

  7. Kafka数据可靠性与一致性解析

    Partition Recovery机制 每个Partition会在磁盘记录一个RecoveryPoint, 记录已经flush到磁盘的最大offset.broker fail 重启时,会进行load ...

  8. getopt() getopt_long()函数手册[中文翻译]

    getopt()函数 getopt_long函数 函数原型(function prototype) #include <unistd.h> int getopt(int argc, cha ...

  9. [Swift实际操作]七、常见概念-(1).范围Range、ClosedRange和NSRange的使用实际操作

    本文将为你解析区间的概念.在对字符串进行处理时,经常会使用到区间.例如获得字符串中从某个位置开始到另一个位置之间的内容. 首先导入需要使用到的框架 import Foundation 区间分为闭区间和 ...

  10. Java并发（一）-了解线程安全

    线程不安全性 先来举例说明线程不安全是什么情况下发生的:例如一个变量可以被多个线程进行访问,那么在大量线程并发访问这个变量的情况下,线程执行的顺序会给最后的结果带来不可预估的错误. 先定义一个单例类S ...