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 ...
随机推荐
- vert.x学习(三),Web开发之Thymeleaf模板的使用
在vert.x中使用Thymeleaf模板,需要引入vertx-web-templ-thymeleaf依赖.pom.xml文件如下 <?xml version="1.0" e ...
- 利用jQuery对插件进行扩展时,方法$.extend()、$.fn.extend()区别与联系
利用JQ开发插件的方法: 1.jQuery.extend(); 2.jQuery.fn.extend(); 3.通过$.widget()应用jQuery UI的部件工厂方式创建. 由于第三种方式通 ...
- Object C中Block用法
先了解定义C语言的函数指针! int sum (int x, int y) { return x+ y; } // 定义函数 int (*p)(int, int) = sum; NSLog(, )); ...
- flot - jQuery 图表插件(jquery.flot)使用
Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 特别注意Flot使用的是UTC时间,最好修改flot.js去掉所有的UTC ...
- inline--行内元素
其实在网页中有看不见的基线,就像作业本上面的一行一行的线,但是我们看不见. div是块状元素,独占一行,用div控制文字的颜色会使得文字换行,使用float可以改善,但是它不会浮在相应的位置: < ...
- LeetCode Binary Tree Vertical Order Traversal
原题链接在这里:https://leetcode.com/problems/binary-tree-vertical-order-traversal/ 题目: Given a binary tree, ...
- XML:使用DOM技术解析xML文件中的城市,实现select级联选择
中国的城市xml格式:cities.xml <?xml version="1.0" encoding="utf-8"?> <china> ...
- Android中如何查看内存
文章参照自:http://stackoverflow.com/questions/2298208/how-to-discover-memory-usage-of-my-application-in-a ...
- 监控redis python脚本
#!/bin/env python #-*- coding:utf- -*- import json import time import socket import os import re imp ...
- (转)nodejs中npm常用命令
npm install <name>安装nodejs的依赖包 例如npm install express 就会默认安装express的最新版本,也可以通过在后面加版本号的方式安装指定版本, ...