先贴代码：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript">

         window.onload = function(){

             //去掉默认的contextmenu事件，否则会和右键事件同时出现。

             document.oncontextmenu = function(e){

                 e.preventDefault();

             };

             document.getElementById("test").onmousedown = function(e){

                 if(e.button ==2){

                     alert("你点了右键");

                 }else if(e.button ==0){

                     alert("你点了左键");

                 }else if(e.button ==1){

                     alert("你点了滚轮");

                 }

             }

         }

     </script>

 </head>

 <body>

 <div style="width: 400px;height:400px;margin:auto;border:1px solid pink" id="test"></div>

 </body>

 </html>

注意的两个点是：

①：先取消默认右击事件,event.preventDefault();

②：判断event.Button:0:左键，1：滚轮，2：右键。

值得一说的的是"oncontextmenu"是指右键按下时的作用。

再给一个应用吧：

右击div显示出自己定义的菜单，点击除了div的地方，是默认的右击事件。

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         body{

             margin: 0;

         }

         #menu{

             width: 100px;

             height: 100px;

             background-color: aquamarine;

             text-align: center;

             position: absolute;

             left: 0;

             top:0;

             display: none;

         }

         #div{

             width: 400px;

             height: 400px;

             background-color: red;;

         }

     </style>

 </head>

 <body>

 <div id="menu">

     <p id="p">lalala</p>

 </div>

 <div id="div"></div>

 <script src="main.js"></script>

 </body>

 </html>

html

 /**

  * Created by Administrator on 2016/8/12.

  */

 (function () {

     var menu = document.querySelector("#menu");

     var div = document.querySelector("#div");

     var p=document.querySelector("#p");

     div.addEventListener("contextmenu", function (event) {

         event.preventDefault();

         menu.style.display = "block";

         menu.style.left = event.pageX + "px";

         menu.style.top = event.pageY + "px";

         p.addEventListener("click",function () {

            alert("a");

         });

     });

     document.addEventListener("contextmenu", function (event) {

         if (event.pageX > 400 || event.pageY > 400) {

             menu.style.display = "none";

         }

     });

 })();

js

效果自行查看吧，其实也没啥。

原理是，右键的菜单其实是一个隐藏的div,当点击父类div的时候，它出现而已。（貌似这样一说显得这个程序好垃圾啊，╮(╯▽╰)╭其实这也是大厦的一块砖，少了它，大厦会塌的）

再给了类似的应用吧,一个点击div消失的效果。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>点击消失</title>

     <style>

         #m{

             width: 300px;

             height: 300px;

         }

         #div{

             width: 100%;

             height:100%;

             background-color: red;

         }

     </style>

 </head>

 <body>

 <div id="m">

     <div id="div"></div>

 </div>

 <script src="main.js"></script>

 </body>

 </html>

html

 /**

  * Created by Administrator on 2016/8/8.

  */

 (function () {

     var width = 100;

     var height = 100;

     var opacity = 1;

     var div = document.getElementById("div");

     var time;

     function clickToNone() {

         // width-=20;

         width -= 10;

         height -= 10;

         opacity -= 0.1;

         div.style.width = width + "%";

         div.style.height = height + "%";

         div.style.opacity = opacity;

         if (width == 0) {

             div.style.display = "none";

             clearInterval(time);

             // div.style.opacity=0;

         }

     }

     function clickTo() {

         time = setInterval(clickToNone, 300);

     }

     div.addEventListener("click", clickTo);

 })();

js

js右击事件的更多相关文章

  1. js 右击事件

    $.fn.extend({        "rightclick": function (fn) {            $(this).mousedown(function ( ...

  2. jqury 右击事件插件

    在有些时候,网页中需要给一些标签对象加入右击的事件,在网上看了一些小的插件,但是不能根据this获取到当前的标签.所以相对他们进行改进一下.自己写了一个小的js右击事件.废话不多说了,看代码. $(f ...

  3. 网页里如何使用js屏蔽鼠标右击事件

    图片.png 在后台管理系统里面,遇到了这样的一个问题,右击ztree菜单,弹出修改界面,但是,现在确实这样的,右击默认弹出功能提示的框框,看上去似乎很影响自己想要的功能,只能禁用了,那么,网页里如何 ...

  4. js为鼠标添加右击事件

    <script language="javascript">  /*document.oncontextmenu=Youji;*/  //为当前文档添加鼠标右击事件,防 ...

  5. ztree实现根节点右击事件，显示添加删除

    需求,右击树节点,出现编辑和删除的提示框 1:在setting 配置里面,给callback设置,右击事件onRightClick: 2:写一个函数onRightClick function onRi ...

  6. 探讨Js的事件的冒泡阶段

    近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...

  7. 浅谈js的事件冒泡机制

    很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...

  8. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  9. Js 冒泡事件阻止

    Js 冒泡事件阻止   1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...

随机推荐

  1. centos7 mysql允许远程连接设置

    Mysql为了安全性,在默认情况下用户只允许在本地登录,可是在有此情况下,还是需要使用用户进行远程连接,因此为了使其可以远程需要进行如下操作: 一.允许root用户在任何地方进行远程登录,并具有所有库 ...

  2. dygraphs for R

    dygraphs一个功能非常强大的处理时间序列的画图包!画出的图在html中打开,鼠标点处,即可得到数据信息.详情见 http://rstudio.github.io/dygraphs/index.h ...

  3. RLearning第2弹：创建数据集

    任何一门语言,数据类型和数据结构是最基础,也是最重要的,必须要学好!1.产生向量 a<-c(1,2,5,3,6,-2,4) b<-c("one","two&q ...

  4. ruby on rails 生产环境调试项目日志查看

    1.项目目录:log/production.log 2.nginx日志:/opt/nginx/logs 生产环境下做的任何更改都要重启服务器 重启 sudo kill $(cat /opt/nginx ...

  5. .vimrc .bashrc

    怕丢了,赶快保存! .bashrc # switch caps lock with escxmodmap -e 'clear Lock' -e 'keycode 0x42 = Escape'sudo ...

  6. js实现select动态添加option

    关于 select 的添加 option 应该注意的问题. 标准的做法如上也就是说,标准的做法是 s.options.add();但是如果你一定要用 s.appendChild(option);注意了 ...

  7. Python 3 并发编程多进程之队列（推荐使用）

    Python 3 并发编程多进程之队列(推荐使用) 进程彼此之间互相隔离,要实现进程间通信(IPC),multiprocessing模块支持两种形式:队列和管道,这两种方式都是使用消息传递的. 可以往 ...

  8. 字典树 HDU 1075 What Are You Talking About

    http://acm.hdu.edu.cn/showproblem.php?pid=1075 ;}

  9. 《python基础教程（第二版）》学习笔记 字符串（第3章）

    <python基础教程(第二版)>学习笔记 字符串(第3章)所有的基本的序列操作(索引,分片,乘法,判断成员资格,求长度,求最大最小值)对字符串也适用.字符串是不可以改变的:格式化输出字符 ...

  10. how to close the old Session - if the same username starts a new Session?

    Question: want to close the old Session - if the same username starts a new Session Any ideas how i ...