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 页面坐标相关知识整理
Jan 09 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
js回调函数原理与用法案例分析
Mar 04 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
JavaScript实现京东快递单号查询
Nov 30 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
Smarty安装配置方法
2008/04/10 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
Python中字典和JSON互转操作实例
2015/01/19 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
python自动12306抢票软件实现代码
2018/02/24 Python
python读取指定字节长度的文本方法
2019/08/27 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
旷课检讨书3000字
2014/02/04 职场文书
公路绿化方案
2014/05/12 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python