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 ...
随机推荐
- django中的Model模型一:
在django的框架设计中采用了mtv模型,即Model,template,viewer Model相对于传统的三层或者mvc框架来说就相当对数据处理层,它主要负责与数据的交互,在使用django框架 ...
- Adnroid Studio使用技巧
官方第一条提示:所有的使用技巧都可以通过Help→Tips of the Day查看. 下面摘抄一些比较有用的技巧: 1.Esc把活动窗口从工具窗口指向编辑窗口.F12把编辑窗口指向上一次活动的工具窗 ...
- Ubuntu eclipse 命令补全失效 (转载)
我的eclipse 3.4,从ibm网站上下载解压后使用.发觉自动补全功能(alt + /)失效. 解决的办法: 1.(eclipse)window --> preferences --> ...
- iOS开发 ~应用程序设计理念:视图控制器(UIViewController)、视图(UIView)
应用程序设计理念:视图控制器(UIViewController).视图(UIView) 利用视图控制器(底层)管理视图(外观),一对一 1.视图的作用:负责显示的外观 2.视图控制器的作用:创建界面. ...
- javaScript事件机制兼容【整理】
[添加事件机制] addEventListener 和 attachEvent [W3C] addEventListener('click' , function(){alert('Hello ...
- Tomcat学习笔记 - 错误日志 - Tomcat访问Manager apps出现401 Unauthorized错误
原因是配置文件中未指定管理员身份. 打开tomcat>conf>tomcat-user.xml文件,添加如下代码: <role rolename="admin-gui&qu ...
- 1009 Enigma
本题的重点是理解清楚题意并能代码模拟.形式是二战德国密码机,和数据结构.算法联系较少. #include <stdio.h> #include <string.h> int m ...
- Qt带来的是更加低廉的开发成本和学习成本,对于很多小公司而言,这种优势足以让他们获得更大的利润空间 good
不能单纯从技术上来看待这个问题,Qt本来是小众的开发平台,个人认为,它的出现只是解决特性场景的特定问题,Qt带来的是更加低廉的开发成本和学习成本,对于很多小公司而言,这种优势足以让他们获得更大的利润空 ...
- Spring Task Scheduler - No qualifying bean of type [org.springframework.scheduling.TaskScheduler] is defined
1. Overview In this article, we are discussing the Springorg.springframework.beans.factory.NoSuchBea ...
- bzoj1664 [Usaco2006 Open]County Fair Events 参加节日庆祝
Description Farmer John has returned to the County Fair so he can attend the special events (concert ...