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在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
element实现合并单元格通用方法
Nov 13 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下对字符串的递增运算代码
2010/08/21 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
JS之小练习代码
2008/10/12 Javascript
node.js入门教程
2014/06/01 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
python3.5 email实现发送邮件功能
2018/05/22 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
java关于string最常出现的面试题整理
2021/01/18 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
土木工程专业个人求职信
2013/12/05 职场文书
党员党性分析材料
2014/02/17 职场文书
酒店管理求职信范文
2014/04/06 职场文书
驾驶员安全责任书
2014/07/22 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
员工安全责任协议书
2016/03/22 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技