先贴代码：

 <!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. 【python】-- 文件操作

    一.概述 我们工作中需要经常操作文件,下面就讲讲如何用Python操作文件 1.文件操作的流程: 打开文件,得到文件句柄赋值给一个变量 通过文件句柄,对文件进行操作 关闭文件 #获取文件句柄 f = ...

  2. Linux中rpm包管理器

    包全名: 1.操作的包是没有安装的软件包时,使用全名,而且要注意路径 2.例如:jdk-8u131-linux-x64.rpm包名: 1.操作的是已经安装好的软件包,使用包名,是搜索/var/lib/ ...

  3. rails常用函数

    1.rails g controller Users rails g model User 2.user.reload.email reload 使用数据库中的数据重新加载对象

  4. error in static/js/xxx.js from UglifyJs Unpected token: punc() [static/js/xxx.js]

    出现问题 使用vue+element-ui+webpack开发项目时,Jenkins构建出现报错error in static/js/xxx.js from UglifyJs Unpected tok ...

  5. shiro4----shiro3代码

    AuthenticationTest.java package cn.itcast.shiro.authentication; import org.apache.shiro.SecurityUtil ...

  6. 【leetcode刷题笔记】Subsets II

    Given a collection of integers that might contain duplicates, S, return all possible subsets. Note: ...

  7. C++的动态库和静态库(dll)

    一,在VS里面 新建项目->Visual C++ -> win32 控制台应用程序 -> 填写项目名称->下一步选择 dll : 二,自动生成的文件如图: 以项目名称生成的My ...

  8. Vim 替换命令

    一,":substitute"的使用 :substitute 命令可以对一个指定范围的区域执行替换操作,可以简写为:s ,它的通用形式如下: :[range]substitute/ ...

  9. UVA 101 vector

    题目链接 白书上的例题,关于vector的使用.不定长数组vector,类型内部封装了一些常用操作.vector就像一个二维数组,只有第一维的大小是固定的,可以像数组一样访问到其中的每一个元素. ve ...

  10. css 中 div垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...