JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例


Posted in Javascript onAugust 03, 2016

JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例

document.oncontextmenu = function(){return false};   //禁止鼠标右键菜单显示
   var res = document.getElementById('box');   //找到id为box的div
   document.body.onmouseup = function(e){   //在body里点击触发事件
    if(e.button===2){    //如果button=1(鼠标左键),button=2(鼠标右键),button=0(鼠标中间键)
      console.log(e);   //将传进去的参数打印出来
      console.log(e.offsetY);   //打印出鼠标点击的Y轴坐标
      console.log(e.offsetX);   //打印出鼠标点击的X轴坐标
      res.style.top = e.offsetY+'px';   //鼠标点击时给div定位Y轴
      res.style.left = e.offsetX+'px';  //鼠标点击时给div定位X轴
      res.style.display = 'block';    //显示div盒子
    }else{
      res.style.display = 'none';     //否则不显示div盒子
    }
    
   }

以上这篇JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
flexigrid 参数说明
Nov 23 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 #Javascript
Highcharts学习之坐标轴
Aug 02 #Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 #Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 #Javascript
Highcharts入门之基本属性
Aug 02 #Javascript
js检查是否关闭浏览器的方法
Aug 02 #Javascript
Highcharts入门之简介
Aug 02 #Javascript
You might like
PHP 高手之路(三)
2006/10/09 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
php数组键名技巧小结
2015/02/17 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
PHP多进程编程实例详解
2017/07/19 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
Javascript 复制数组实现代码
2009/11/26 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
美国存储和组织商店:The Container Store
2017/08/16 全球购物
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
医学专业毕业生个人的求职信
2013/12/04 职场文书
自我鉴定三原则
2014/01/13 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
市场调查策划方案
2014/06/10 职场文书
村党组织公开承诺书
2015/04/30 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
JavaScript的function函数详细介绍
2021/11/20 Javascript