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 相关文章推荐
javascript实现unicode和字符的互相转换
Jul 18 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 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
使用swoole扩展php websocket示例
2014/02/13 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
详解JavaScript的变量
2019/04/04 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
Django中几种重定向方法
2015/04/28 Python
python实现支付宝转账接口
2019/05/07 Python
django自定义模板标签过程解析
2019/12/14 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
人力资源求职信
2014/05/25 职场文书
假期安全教育广播稿
2014/10/04 职场文书
2014年校长工作总结
2014/12/11 职场文书
调解书格式范本
2015/05/20 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang
Python中的datetime包与time包包和模块详情
2022/02/28 Python
Minikube搭建Kubernetes集群
2022/03/31 Servers