先贴代码：

 <!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. windows7下cmd命令窗口没有滚动条的解救方法

    由于昨天的好123问题没有解决,我想查看一下本机的ip地址等,于是打开了cmd窗口,输入ipconfig/all命令进行查看,但是发现出现了下面的窗口,无法进行滚动,完全无法查看详细的信息. 然后我百 ...

  2. oracle chain

    [oracle@tyger dbs]$ sqlplus / as sysdba SQL*Plus: Release 10.2.0.1.0 - Production on Tue May 6 13:02 ...

  3. hash是什么？

    最近读关于php内核的资料,发现php中 在实现变量以及数据类型的实现中大量使用哈希算法,并且非常细致做出了很多优秀的细节设计.比如:在 zend.hash.h 中 static inline ulo ...

  4. IBM db2安装好了以后，启动不了服务

    系统默认将Server服务禁用,开启这个服务就可以启动服务.

  5. 改善程序与设计的55个具体做法 day4

    今天晚上回到小区门口,买了点冬枣,要结账的时候想起来,钥匙没带,落公司了! TNND,没办法再回趟公司,拿了钥匙,来回一个小时,汗~ 条款10:令operator=返回一个reference to * ...

  6. 剑指offer之 从尾到头打印链表

    package Problem5; import java.util.Stack; //首先定义链表结构class LinkNode{ LinkNode next; int node_value;} ...

  7. EntityFramework 学习 一 Eager Loading

    贪婪加载是指查询一个类型实体的时候同时查询与实体关联的类型 通过Include()方法实现 using (var context = new SchoolDBEntities()) { var stu ...

  8. 算法（Algorithms）第4版 练习 1.3.2

    was best times of the was the it (1 left on stack)

  9. DIV+CSS IE6/IE7/IE8/FF兼容问题大全

    1. [代码][CSS]代码 1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 2, 居中问题. 1).垂直居 ...

  10. HttpContext.Current为NULL

    总结:HttpContext.Current是基于System.Runtime.Remoting.Messaging.CallContext这个类,子线程和异步线程都无法访问到主线程在CallCont ...