oncontextmenu事件
oncontextmenu的作用是阻止浏览器默认的鼠标右键行为。
阻止弹出右键自带菜单
document.oncontextmenu=function(){
console.log('你点击了右键');
return false;
}
模拟右键菜单
<style>
*{
margin: 0;
padding:0;
list-style: none;
}
#main{
width: 140px;
height: auto;
background: #ededed;
text-align: center;
display: none;
position: absolute;
}
</style>
<div id="main">
<ul>
<li>我是第一个选项</li>
<li>我是第二个选项</li>
<li>我是第三个选项</li>
<li>我是第四个选项</li>
</ul>
</div>
<script>
document.oncontextmenu=function(ev){
var oEvent = ev||event;
var Odiv = document.getElementById('main');
Odiv.style.display='block';
Odiv.style.left=oEvent.clientX+'px';
Odiv.style.top=oEvent.clientY+'px';
return false
};
var Odiv = document.getElementById('main');
document.onclick=function(){
Odiv.style.display='none';
} </script>
oncontextmenu事件的更多相关文章
- OnContextMenu事件(转)
用oncontextmenu事件单禁用右键菜单 一个页面中,BODY中用oncontextmenu='return false'来取消鼠标右键:在JS中设置oncontextmenu='return ...
- 熟悉一下oncontextmenu事件的知识
定义和使用 只要点击鼠标右键,就触发oncontextmenu事件并打开上下文菜单. 需要注意的是:所有主流浏览器都支持oncontextmenu事件,但其中的contextmenu元素只有FireB ...
- oncontextmenu
一个页面中,BODY中用oncontextmenu='return false'来取消鼠标右键:在JS中设置oncontextmenu='return true'用window.document.on ...
- 第一百二十一节,JavaScript事件绑定及深入
JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...
- OnContextMenu实现禁止鼠标右键
OnContextMenu事件 定义和使用:oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单.注意:所有浏览器都支持 oncontextmenu 事件, contextmen ...
- 浏览器根对象window之事件
1. [事件]动画 onanimationstart onanimationend onanimationiteration onwebkitanimationend onwebkitanimatio ...
- Js中的4个事件
除了加载文档的事件onload和鼠标相关的一些事件如onclick,onmouseover等.js还有一些相对不常用的事件,这些事件也有各自的应用场景,本文就介绍 onkeydown,oncontex ...
- javascript基础07
javascript基础07 1.节点 元素.childNodes : 属性 只读 属性 子节点列表集合 元素.childNodes 只包含子节点,不包含孙节点 DOM节点的类型有很多种,w3c标准有 ...
- 《HTML5秘籍》学习总结--2016年7月24日
前段时间因为工作中看到同事使用了一个type为date的<input>元素,直接就形成了一个日期选择的表单控件,当时觉得很神奇,以为是什么插件,就问了同事是怎么做出来的,同事告诉我这是HT ...
随机推荐
- js 相关知识整理(一)
真正声明变量,是用逗号隔开的 EcM5:严格模式“use strict” java与js 语言的区别: 1.弱类型语言 1.声明变量时不需要提前指定数据类型 2.同一个变量可先后保存不同类型的数据 3 ...
- cocoapods 升级到最新beta 版
1 确保你的ruby源是https://rubygems.org/ 国内的镜像不一定行 2 sudo gem install -n /usr/local/bin cocoapods 或者 sudo ...
- Cen0S下挂载设备
在CentOS中,如果我们要查看光驱,U盘或者要把安装包挂载到某个文件夹,我写下我的一些理解. 所谓的挂载,就是把物理设备或者文件(包含安装文件,压缩包等等),与系统中的某个目录建立一个快捷方式,然后 ...
- varnish4.0 流程图以及说明
varnish 中的内置变量 req repos client server bereq beresp bereq bereq.http.HEADER 由varnish发往backend server ...
- Wampserver 2.5 多站点配置方法
写在开头:本文适用于wampserver2.5版本,和wamp的老版本配置有语法上的区别,笔者正是因为被老版本的配置办法给整迷糊了所以才总结了一篇针对2.5版本的配置方法,如果您还停留在1.x或着已经 ...
- spring cloud的主要组成部分
服务发现:Eureka断路器: Hystrix 客户端和控制面板客户端负载均衡: Ribbon声明式REST客户端: Feign外部化配置: Archaius路由和过滤器: Zuul RxJava w ...
- xcode调整debug,release模式
今天调试的时候发现变量都不能查看了.在「lldb」中通过「po」命令来查看总是提示变量未找到. 环境 xcode 7, Swift 2 错误提示 ‘XXXX’ was compiled with op ...
- You may receive an exception when you browse a .NET Framework 2.0 ASP.NET Web application
SYMPTOMS When you browse a Microsoft .NET Framework 2.0 ASP.NET Web application, you may receive one ...
- leetcode bugfree note
463. Island Perimeterhttps://leetcode.com/problems/island-perimeter/就是逐一遍历所有的cell,用分离的cell总的的边数减去重叠的 ...
- cms 常用标签
{template "content","header"} 调用根目录下phpcms\template\content\header文件 {CHARSET} 字 ...