先贴代码：

 <!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中TCP和UDP区别

    TCP(Transmission Control Protocol)可靠的.面向连接的协议(eg:打电话).传输效率低全双工通信(发送缓存&接收缓存).面向字节流.使用TCP的应用:Web浏览 ...

  2. git本地仓库管理远程仓库

    git remote add origin https://xxxxxgit push -u origin master

  3. Cordova+FrameWork7开发简单教程

    1: 环境要有:(一个不会搭建环境的程序员,要么学,要么退出编程 ) 环境这里我只说需要什么: 1>AndroidStudio 3.0 (2.几的版本总会出问题.我喜欢用新版本) 2>co ...

  4. 利用tomcatserver配置https双向认证

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/luo201227/article/details/36897387 首先请保证已经安装好jdk,而且 ...

  5. JDBC【菜鸟学JAVA】

    1:首先下载sqljdbc.jar,然后配置ClassPath,然后再在工程文件中把这个(sqljdbc.jar)架包引用上,就可以开始JAVA操作之旅了 打开Eclipse,“文件”→“新建”→“项 ...

  6. php面向对象加载类

    php加载类: 新建php文件用驼峰法命名类名: 每个单词首字母大写,后面加.class.php表示这是php类文件.例如: ClubMember.class.php 若为纯php页面,<?ph ...

  7. 转 Oracle 11g服务详细介绍

    转自http://www.cnblogs.com/userWuLiang/archive/2013/04/13/3017900.html Oracle 11g服务详细介绍及哪些服务是必须开启的? 成功 ...

  8. m3u8格式转MP4

    公司直播平台使用的是七牛直播,今天有客户表示想将直播回放视频下载下来,数据妹子犯了愁,表示这个不会下载给客户,于是乎这个任务就落在了我的头上.熟练的打开视频,在 HTML 源代码播放地址为 http: ...

  9. 浅谈Android系统开发中LOG的使用【转】

    本文转载自:http://blog.csdn.net/luoshengyang/article/details/6581828 在程序开发过程中,LOG是广泛使用的用来记录程序执行过程的机制,它既可以 ...

  10. hive启动时 Terminal initialization failed; falling back to unsupported java.lang.IncompatibleClassChangeError: Found class jline.Terminal, but interface was expected

    错误提示信息如下 [ERROR] Terminal initialization failed; falling back to unsupported java.lang.IncompatibleC ...