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的更多相关文章

  1. Jquery hover鼠标经过时弹出div动态提示语

    一.效果图 二.需求描述 1.鼠标经过table每一行时,弹出div动态提示语: 2.div弹出层的位置随鼠标位置的变化而变化: 3.鼠标离开table或获取的动态提示语为空时,div弹出层消失. 下 ...

  2. SVN 安装后右键出现点击鼠标右键弹出错误提示:CrashHandler initialization error

    SVN 安装后右键出现点击鼠标右键弹出错误提示:CrashHandler initialization error 原因是目标文件夹中缺少SendRpt.exe文件 解决方案:找svn是好的的同事将b ...

  3. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  4. JavaScript总结之鼠标划过弹出div单击出现对话框

    为了满足他们的永无止境的要求,我可谓是任劳任怨啊,累断了双手,看瞎了双眼.这个是来写鼠标划过一个按钮,然后弹出一个小提示框解释,另外根据radio是否选中,判断点击后如何执行,然后执行之后再有一个确认 ...

  5. js点击弹出div层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. DirectUI界面编程(六)实现右键弹出菜单

    本节向大家介绍一下右键弹出菜单是如何实现的.效果如下,在窗口中点击鼠标右键弹出菜单,点击菜单项能够响应菜单点击事件. 使用Duilib库实现的弹出菜单,实际上也是一个Windows窗口,因此我们需要创 ...

  7. win32进阶之路:程序托盘图标+右键弹出菜单

     开场白 本次介绍两个非常棒且实用的技巧:程序托盘图标和右键弹出菜单,效果如下图. 程序托盘图标用了迅雷的图标,右键点击时候会弹出三个选项的菜单. 程序托盘图标设置 我会用尽可能清晰明了的步骤介绍方式 ...

  8. vue封装公用弹出框方法,实现点击出现操作弹出框

    vue封装公用弹出框方法,实现点击出现操作弹出框 如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽 ...

  9. 基于jQuery点击圆形边框弹出图片信息

    分享一款基于jQuery点击圆形边框弹出图片信息.这是一款鼠标经过图片转换成圆形边框,点击可弹出文字信息.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=&q ...

  10. 文字添加响应事件,js动态加载CSS, js弹出DIV

    文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

随机推荐

  1. CoutDownLatch 多线程同步辅助类

    CountDownLatch,一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. 主要方法 public CountDownLatch(int count); pu ...

  2. 某Java游戏服务器用到的知识

    Runtime.getRuntime().addShutdownHook(shutdownHook); shutdownHook()函数可以在jvm关闭的时候进行内存清理.对象销毁等操作 http:/ ...

  3. C++单链表的创建与操作

    链表是一种动态数据结构,他的特点是用一组任意的存储单元(可以是连续的,也可以是不连续的)存放数据元素.链表中每一个元素成为“结点”,每一个结点都是由数据域和指针域组成的,每个结点中的指针域指向下一个结 ...

  4. Lucene学习总结之八:Lucene的查询语法,JavaCC及QueryParser

    一.Lucene的查询语法 Lucene所支持的查询语法可见http://lucene.apache.org/java/3_0_1/queryparsersyntax.html (1) 语法关键字 + ...

  5. HTML5简单入门系列(九)

    前言 上篇本来应该就是最后一篇了,但是楼主总觉得没有写上一个简单应用,不算是完整的学习系列.所以增加一篇关于动画的应用,对一个开源动画的介绍(很基础,非楼主原创). 本篇介绍一个基于Canvas的发光 ...

  6. Oracle数据库之间数据同步

    这段时间负责某个项目开发的数据库管理工作,这个项目中开发库与测试数据库分离,其中某些系统表数据与基础资料数据经常需要进行同步,为方便完成指定数据表的同步操作,可以采用dblink与merge结合的方法 ...

  7. 在Python3.5下安装和测试Scrapy爬网站

    1. 引言 Scrapy框架结构清晰,基于twisted的异步架构可以充分利用计算机资源,是爬虫做大的必备基础.本文将讲解如何快速安装此框架并使用起来. 2. 安装Twisted 2.1 同安装Lxm ...

  8. 【转】Redis安装整理(window平台和Linux平台)

    原文连接:http://zheng12tian.iteye.com/blog/1471726 原文作者:zheng12tian 转载注明以上信息! window平台Redis安装 redis wind ...

  9. python一句代码建立树

    from collections import defaultdict def tree(): return defaultdict(tree) 上面的代码不难理解,就是利用递归的方式,创建了一个树的 ...

  10. TabHost刷新activity的方法

    在android中,使用tabHost的时候,如果tab被点击,该tab所对应的activity被加载了,从别的tab切换回来的时候,activity不会再次被创建了(onCreate),所以要想每次 ...