熟悉一下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()。

转载于:https://www.cnblogs.com/murenziwei/p/9216027.html

熟悉一下oncontextmenu事件的知识相关推荐

oncontextmenu事件
用oncontextmenu事件单禁用右键菜单 onconTextmenu=window.event.returnValue=false;右键菜单禁用,用这个可以禁止复制. 在<body> ...
论文浅尝 | ExCAR: 一个事件图知识增强的可解释因果推理框架
笔记整理:朱珈徵,天津大学硕士链接:https://aclanthology.org/2021.acl-long.183.pdf 动机因果推理旨在理解因果之间的一般因果相关性,对于各种人工智能应用 ...
用oncontextmenu事件单禁用右键菜单
onconTextmenu=window.event.returnValue=false;右键菜单禁用,用这个可以禁止复制. 在<body>中加入属性代码: οncοntextmenu=& ...
OnContextMenu事件-单禁用右键菜单
OnContextMenu事件用oncontextmenu事件单禁用右键菜单一个页面中,BODY中用οncοntextmenu='return false'来取消鼠标右键:在JS中设置οncοnt ...
JS中的事件基础知识
本文首发于个人博客:www.wyb.plus JS作为一门事件驱动型的语言,了解与事件有关的知识是十分必要的. JS中与事件有关的概念非常多,本文尽量整理完善. 作者:王雨波 qq:760478684 ...
js事件(Event)知识整理
鼠标事件鼠标移动到目标元素上的那一刻,首先触发mouseover 之后如果光标继续在元素上移动,则不断触发mousemove 如果按下鼠标上的设备(左键,右键,滚轮--),则触发mousedow ...
熟悉计算机信息处理的基础知识,信息处理技术员学习指导—考试内容
(一)考试大纲 1.了解信息技术的基本概念: 2.熟悉信息处理基础知识: 3.熟悉计算机的组成.各主要部件的功能和性能指标: 4.了解计算机网络与多媒体基础知识: 5.熟悉信息处理常用设备: 6.熟悉 ...
DOM0,DOM2,DOM3事件,事件基础知识入门
事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM ...
JavaScript 事件入门知识
JavaScript事件是由访问Web页面的用户引起的一系列操作; 例如:用户点击;当用户执行某些操作的时候,再去执行一系列代码; 一事件介绍事件一般是用于浏览器和用户操作进行交互;最早是IE和N ...

熟悉一下oncontextmenu事件的知识

熟悉一下oncontextmenu事件的知识相关推荐

最新文章

热门文章