js自定义鼠标右键的实现原理及源码
今天来记录下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;
}
这样的话，再点击右键也不会出现任何响应了。然后返回来再看整个的事件应用，好像除了这个事件，其他的都是比较熟悉的事件了，可就是对事件的这种整合总是缺乏，关键还是思路是创意吧，不过先不管哪儿多了，先整吧，但求熟读三千首，不求写来只问吟。扎马步，扎马步，扎马步.....
相关推荐
-
Js实现自定义右键行为
自定义右键行为(通过事件对象获得鼠标的坐标(x,y)) <!doctype html> <html> <head> <meta charset="UTF-8"> <title>demo</title> <style type="text/css"> html{ height:100%; } body{ height:100%; } #mydiv{ width:300px; heigh
-
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
本文实例讲述了js实现完全自定义可带多级目录的网页鼠标右键菜单方法.分享给大家供大家参考.具体分析如下: 这是很不错的一个网页鼠标特性,这个代码可以控制网页中鼠标的右键菜单,完全按照你的意思打造,可以带多级的目录显示. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
-
JS简单实现自定义右键菜单实例
RT,一个简单的例子,仅仅讲述原理 复制代码 代码如下: <div id="menu" style="width: 0;height: 0;background: cadetblue;position: absolute"></menu> 假设我要把上面这个div设置为右键菜单,先随意美化一下. 原理就是利用contextmenu事件,右键点击时,会触发这个事件时,该事件对象可以获得鼠标距离页面左上角的距离clientX和clientY, 我
-
JavaScript 对任意元素,自定义右键菜单的实现方法
一.一些概念: 1.鼠标事件有一个botton属性:返回一个整数,用于表示点击的是哪个鼠标按键. BUG:在IE和标准DOM的鼠标事件中,唯一一个button属性值相同的是"单击右键"事件,都返回2. 2.事件onmousedown:表示鼠标按键按下的动作. 事件oncontextmenu:点击鼠标触发的另一个事件. 3.中断默认事件处理函数的方法:IE中设置returnValue=false; 标准DOM中调用preventDefault()方法. 4.事件对象:①在IE中,事件对
-
javascript鼠标右键菜单自定义效果
本文实例讲解了javascript鼠标右键菜单的实现方法,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta charset="gb2312" /> <title></title> <style> #menu{ border:solid 1px gray; width:100px; display:none; position:absolute; background-
-
js实现右键自定义菜单
本文实例为大家分享了右键自定义菜单的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #menu { height: 200px; width: 50px; border: 1px solid gray; back
-
javascript自定义右键弹出菜单实现方法
本文实例讲述了javascript自定义右键弹出菜单实现方法.分享给大家供大家参考.具体实现方法如下: <head runat="server"> <title>无标题页</title> <script type="text/javascript"> var oPopup = window.createPopup(); function PopMenu(id) { var oPopBody = oPopup.docum
-
JS实现的自定义右键菜单实例二则
本文实例讲述了JS实现的自定义右键菜单.分享给大家供大家参考.具体如下: 示例1: 运行效果截图: 具体代码如下: <!DOCTYPE html> <html> <head> <title>JS实现自定义右键菜单</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script src=&
-
js自定义鼠标右键的实现原理及源码
今天来记录下js来自定义鼠标右键,同样先来分解下它的实现原理: 1.屏蔽右键默认事件:(一度我以为修改的就是默认事件) 2.对一个ul的隐藏:(这个我也曾迂腐的认为值得这样操作的都是div,汗) 3.对鼠标点击右键做出的响应,显示隐藏的ul: 4.鼠标重新点击后,ul重新被隐藏 这样来看的话,我们需要做的事情是不是就简单了很多,先上代码: html部分 <ul id="testRight" style="width: 100px;background-color: ye
-
javascript局部自定义鼠标右键菜单
本文实例为大家分享了js局部自定义鼠标右键菜单的具体代码,供大家参考,具体内容如下 前言 html局部自定义鼠标右键菜单 局部! 局部! 局部! 重要的关键词说三遍! 一.效果展示 二.源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #Te
-
javascript全局自定义鼠标右键菜单
本文实例为大家分享了javascript全局自定义鼠标右键菜单的具体代码,供大家参考,具体内容如下 前言 html全局自定义鼠标右键菜单 一.效果展示 二.源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #TextBox{ width: 2
-
jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）
ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件.通过ImageDrawer.js插件,你可以制作在页面中绘制图片的动态过程,你可以控制绘制动画的持续时间等参数,非常有趣. 效果展示 源码下载 使用方法 使用该动态绘制图片插件需要在页面中引入imagedrawer.css,jquery和imagedrawer.js文件. <link rel="stylesheet" href="css/imagedrawer.css"
-
JS库particles.js创建超炫背景粒子插件(附源码下载)
插件描述:particles.js用于创建粒子的轻量级 JavaScript 库. 查看 效果 源码下载 使用 加载 particles.js和配置粒子 <div id="particles-js"></div> <script src="particles.js"></script> app.js /* particlesJS.load(@dom-id, @path-json, @callba
-
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
效果图如下: 我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的,不需要flash,不依赖任何其他js库的非常小的插件,它叫clipboard.js. 查看演示 下载源码 HTML 首先加载本地clipboard.js文件. 复制代码 代码如下: <script src="clipboard.min.js"></scri
-
java并发容器CopyOnWriteArrayList实现原理及源码分析
CopyOnWriteArrayList是Java并发包中提供的一个并发容器,它是个线程安全且读操作无锁的ArrayList,写操作则通过创建底层数组的新副本来实现,是一种读写分离的并发策略,我们也可以称这种容器为"写时复制器",Java并发包中类似的容器还有CopyOnWriteSet.本文会对CopyOnWriteArrayList的实现原理及源码进行分析. 实现原理 我们都知道,集合框架中的ArrayList是非线程安全的,Vector虽是线程安全的,但由于简单粗暴的锁同步机制,
-
基于线程池的工作原理与源码解读
随着cpu核数越来越多,不可避免的利用多线程技术以充分利用其计算能力.所以,多线程技术是服务端开发人员必须掌握的技术. 线程的创建和销毁,都涉及到系统调用,比较消耗系统资源,所以就引入了线程池技术,避免频繁的线程创建和销毁. 在Java用有一个Executors工具类,可以为我们创建一个线程池,其本质就是new了一个ThreadPoolExecutor对象.线程池几乎也是面试必考问题.本节结合源代码,说说ThreadExecutor的工作原理 一.线程池创建 先看一下ThreadPoolExec
-
Java实现多人聊天室的原理与源码
多人聊天室原理图 源码 工具类: 该类用于关闭各种流. public class CloseUtil { public static void CloseAll(Closeable... closeable){ for(Closeable c:closeable){ if (c != null) { try { c.close(); } catch (IOException e) { e.printStackTrace(); } } } } } 服务器: 服务器端创建一个serverSocket
-
Java并发编程之ReentrantLock实现原理及源码剖析
目录 一.ReentrantLock简介 二.ReentrantLock使用 三.ReentrantLock源码分析 1.非公平锁源码分析 2.公平锁源码分析 前面<Java并发编程之JUC并发核心AQS同步队列原理剖析>介绍了AQS的同步等待队列的实现原理及源码分析,这节我们将介绍一下基于AQS实现的ReentranLock的应用.特性.实现原理及源码分析. 一.ReentrantLock简介 ReentrantLock位于Java的juc包里面,从JDK1.5开始出现,是基于AQS同步队列