js自定义鼠标右键的实现原理及源码


Posted in Javascript onJune 23, 2014

今天来记录下js来自定义鼠标右键,同样先来分解下它的实现原理:

1、屏蔽右键默认事件;(一度我以为修改的就是默认事件)

2、对一个ul的隐藏;(这个我也曾迂腐的认为值得这样操作的都是div,汗)

3、对鼠标点击右键做出的响应,显示隐藏的ul;

4、鼠标重新点击后,ul重新被隐藏

这样来看的话,我们需要做的事情是不是就简单了很多,先上代码:

html部分

<ul id="testRight" style="width: 100px;background-color: yellow;position: absolute;z-index: 100;"> 
<li><a href="#">开始</a></li> 
<li><a href="#">暂停</a></li> 
<li><a href="#">拜拜</a></li> 
</ul>

javascript部分:

window.onload=function(){ 
var forRight=document.getElementById("testRight");//获取对象,现在太熟悉了 
forRight.style.display="none"; 
var title=forRight.getElementsByTagName("li"); 

for(var i=0;i<title.length;i++){ 
title[i].onmouseover=function(){ 
this.classname="active";//其实这里我们也可以调用其他事件吧 
}; 
title[i].onmouseout=function(){//这里也是鼠标的两个事件吧 
this.classname=""; 
}; 
} 

document.oncontextmenu=function(event){//这是实现的关键点 
var event=event||window.event;//这个都不是问题了吧 
forRight.style.display="block"; 
forRight.style.left=event.clientX+"px"; 
forRight.style.top=event.clientY+"px";//鼠标的坐标啊 
return false;//这里返回false就是为了屏蔽默认事件 
}; 
document.onclick=function(){//就是为了更形象的模仿啊 
forRight.style.display="none"; 
}; 
};

先来看今天记录的最关键的地方:document.oncontextmenu这个事件返回false的话就是屏蔽默认事件,如果我们其他都不写,只在这个事件里面写return,好像就下面这样

document.oncontextmenu=function(){ 
return false; 
}

这样的话,再点击右键也不会出现任何响应了。然后返回来再看整个的事件应用,好像除了这个事件,其他的都是比较熟悉的事件了,可就是对事件的这种整合总是缺乏,关键还是思路是创意吧,不过先不管哪儿多了,先整吧,但求熟读三千首,不求写来只问吟。扎马步,扎马步,扎马步.....

Javascript 相关文章推荐
Javascript----文件操作
Jan 18 Javascript
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
详解如何创建并发布一个 vue 组件
Nov 08 Javascript
JavaScript实现前端倒计时效果
Feb 09 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 #Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 #Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 #Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 #Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 #Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 #Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 #Javascript
You might like
PHP 身份验证方面的函数
2009/10/11 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
javascript实现画板功能
2020/04/12 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
Windows下python2.7.8安装图文教程
2016/05/26 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
python difflib模块示例讲解
2017/09/13 Python
python模拟表单提交登录图书馆
2018/04/27 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
文明演讲稿范文
2014/05/12 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers