在浏览器中鼠标右键点击时进行定位和触发点击事件

开发工具与关键技术：Microsoft Visual Studio 2015、…NET MVC
作者：邓恩明
撰写时间：2019年03月27日

一般情况下，当我们用浏览器执行MVC项目时，在某个页面中点击鼠标右键时浏览器都会默认的有一个点击事件，如下：

那么如果我们在项目中需要借助点击鼠标右键来实现某个功能的话，我们就需要在页面的某一块特定的区域内让浏览器无法执行它默认的那个鼠标右键点击事件。
首先，先在页面的最大那层——body层中，当点击鼠标右键时利用返回一个错误的值“ return false”来误导浏览器做出错误的判断，从而阻止它默认的点击事件，代码如下：

然后在body层里面,用div标签建立一个需要借助点击鼠标右键来实现某个功能的区域，这里就先称这个区域为 “盒子1” ；那就是说我们只有在盒子1里面点击鼠标右键才能出现我们想要实现的这个功能，那我们就在盒子1里面再建一个盒子，称为“盒子2”，准备工作：
盒子1：设一个ID为DingHuoBox，方便后面获取；
盒子2：设一个ID为menuTow，然后添加“绝对定位”，再给它“display：none”让它隐藏。

做好准备工作之后，就可以来分析功能了，功能：
当我们在盒子1里每次点击鼠标右键时，系统就自动获取当前鼠标所在X轴和Y轴，然后就用到盒子2的绝对定位中的“top——距离顶部的距离”和“left——距离左边的距离”，
接下来通过 “=” 号将X轴的坐标值赋值给盒子2的top，将Y轴的坐标值赋值给盒子2的left，然后给盒子2 “display：block” 让它显示出来。

实现：
(一) 自定义一个变量 = 盒子2（通过ID获取），如下：

（二）通过ID找到盒子一，然后给它一个鼠标松开时触发的onmouseup事件，然后在onmouseup事件里进行判断点击的是鼠标的左键,右键，还是中键button=1（鼠标左键），button=2（鼠标右键），button=0（鼠标中间键）。若button=2，就进行坐标赋值，且让盒子二显示；否则让其隐藏，如下：

功能实现效果图如下：