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

开发工具与关键技术:Microsoft Visual Studio 2015、…NET MVC

一般情况下,当我们用浏览器执行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,就进行坐标赋值,且让盒子二显示;否则让其隐藏,如下:
在这里插入图片描述
功能实现效果图如下:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值