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的更多相关文章
- Jquery hover鼠标经过时弹出div动态提示语
一.效果图 二.需求描述 1.鼠标经过table每一行时,弹出div动态提示语: 2.div弹出层的位置随鼠标位置的变化而变化: 3.鼠标离开table或获取的动态提示语为空时,div弹出层消失. 下 ...
- SVN 安装后右键出现点击鼠标右键弹出错误提示:CrashHandler initialization error
SVN 安装后右键出现点击鼠标右键弹出错误提示:CrashHandler initialization error 原因是目标文件夹中缺少SendRpt.exe文件 解决方案:找svn是好的的同事将b ...
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- JavaScript总结之鼠标划过弹出div单击出现对话框
为了满足他们的永无止境的要求,我可谓是任劳任怨啊,累断了双手,看瞎了双眼.这个是来写鼠标划过一个按钮,然后弹出一个小提示框解释,另外根据radio是否选中,判断点击后如何执行,然后执行之后再有一个确认 ...
- js点击弹出div层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- DirectUI界面编程(六)实现右键弹出菜单
本节向大家介绍一下右键弹出菜单是如何实现的.效果如下,在窗口中点击鼠标右键弹出菜单,点击菜单项能够响应菜单点击事件. 使用Duilib库实现的弹出菜单,实际上也是一个Windows窗口,因此我们需要创 ...
- win32进阶之路:程序托盘图标+右键弹出菜单
开场白 本次介绍两个非常棒且实用的技巧:程序托盘图标和右键弹出菜单,效果如下图. 程序托盘图标用了迅雷的图标,右键点击时候会弹出三个选项的菜单. 程序托盘图标设置 我会用尽可能清晰明了的步骤介绍方式 ...
- vue封装公用弹出框方法,实现点击出现操作弹出框
vue封装公用弹出框方法,实现点击出现操作弹出框 如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽 ...
- 基于jQuery点击圆形边框弹出图片信息
分享一款基于jQuery点击圆形边框弹出图片信息.这是一款鼠标经过图片转换成圆形边框,点击可弹出文字信息.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=&q ...
- 文字添加响应事件,js动态加载CSS, js弹出DIV
文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
随机推荐
- React-Native OpenGL体验二
搞了一下午,终于做了几个Demo出来,下面我就说一下我对React-Native下的OpenGL的流畅度的体验吧. 我使用的测试机是坚果手机 ...
- scrollview不能滚动
1. 图片视图上不能直接滚动,需要设置交互属性为YES _contentView = [[UIImageView alloc]initWithFrame:CGRectMake(0, _headerVi ...
- 详解一名合格PHP工程师应该具备的基本知识结构
在学习php时的一些小沉淀,供童鞋们欣赏哈.. 1.掌握语言本身的语法,熟悉常用类库是必须的: 2.面向对象最为当今的主流也是必须掌握的: 3.常用设计模式必须掌握,设计模式是前辈的总结.经验: 4. ...
- 秒(s) 毫秒(ms) 微秒(μs) 纳秒(ns) 皮秒(ps)及Java获得 .
Date date=new Date(); long hm=date.getTime(); //获取毫秒 或者 毫秒级:System.currentTimeMillis() 纳秒级: System.n ...
- python笔记之hashlib模块
涉及加密服务:14. Cryptographic Services其中 hashlib是涉及安全散列和消息摘要,提供多个不同的加密算法借口,如SHA1.SHA224.SHA256.SHA384.SHA ...
- information_schema.collation_character_set_applicability 学习
字符集和排序规则之间是不可以随便搭配的.如果你想知道一个字符集它所搭配的排序规则有哪些?那就可以从information_schema.collation_character_set_applicab ...
- Android Service 通过 BroadcastReceiver 更新Activity UI
1:MainActivity.java public class MainActivity extends Activity { private TextView tvInfo = null; pri ...
- JavaScript 之 Cookie
JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的. 而cookie是运行在客户端的,所以可以用JS来设置cookie. 假设有这样一 ...
- C# 语法技巧_三目运算_switch_case
一.三目运算符 三目运算符的一种简便写法: bool b = str == "abc" ? false : true; 当是自身时,实际上别吝啬那一个括号,有一个括号,实际上更容易 ...
- FileStream类
使用FileStream能够对对系统上的文件进行读.写.打开.关闭等操作.并对其他与文件相关的操作系统提供句柄操作,如管道,标准输入和标准输出.读写操作可以指定为同步或异步操作.FileStream对 ...