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 ...
随机推荐
- Android中获取apk基本信息
一 PackageManager可以获得的所有包节点信息: 1,所有节点的基类:PackageItemInfo: 2,PackageInfo:package的全面信息,与AndroidManifest ...
- 内存管理pbuf.h头文件源码解析——LwIP学习
声明:个人所写所有博客均为自己在学习中的记录与感想,或为在学习中总结他人学习成果,但因本人才疏学浅,如果大家在阅读过程中发现错误,欢迎大家指正. LwIP的内核(core文件夹)文件中pbuf.c是包 ...
- (原)ubuntu上安装dlib
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5652791.html 参考网址: http://stackoverflow.com/questions ...
- shell中的expr命令
expr 可以进行的操作如下: 逻辑操作 arg1 | arg2 逻辑或操作,真则返回arg1,否则返回arg2(以null或者0来判断参数的真假,有短路功能) arg1 & arg2 逻辑与 ...
- centos 6.4从源码安装mysql 5.6笔记
上周在安装mysql时遇到了些许麻烦,今天整理下. 在代码目录建立obj文件夹. 在obj目录下,执行cmake .. -DXXX // XXX表示一些参数,详见http://dev.mysql.c ...
- CentOS 安装redis2.8.13 提醒"libc.so.6: version `GLIBC_2.14' not found"系统的glibc版本太低
以下在系统CentOS 6.3 x86_64上操作 1.试图运行程序,提示"libc.so.6: version `GLIBC_2.14' not found",原因是系统的gli ...
- InetAddress类的使用
1.1. 简介 IP地址是IP使用的32位(IPv4)或者128位(IPv6)位无符号数字,它是传输层协议TCP,UDP的基础.InetAddress是Java对IP地址的封装,在java.net中有 ...
- 如何成为一个真正在路上的Linuxer
Linux 是工具,却更像一个信仰. 写在前面: 本文目的不是教你如何成为一个真正的Linuxer,也没有能力教你成为一个真正的linuxer,而是通过笔者的一些想法试图指引你真正踏上学习linux之 ...
- python Post方式发起http请求 使用百度接口地理编码
import os import httplib import json import urllib baiduapi="api.map.baidu.com:80" src=&qu ...
- js的eval方法
eval方法: 检查JScript代码,并且执行. 语法: eval(codeString); 参数: codeString是必选项,参数是包含有效的JScript代码的字符串值,这个字符串值将由JS ...