鼠标的默认事件之oncontextmenu及其案例
2016-07-19 15:42
344 查看
当我们在浏览器中点击鼠标右键时会弹出一个默认的窗口,我们可以通过改变oncontexmenu事件来修改它的默认事件;另外,当我们按空格键时,浏览器窗口的滚动条会向下滚动一段距离,我们也可以通过绑定相应的事件来改变它。如下:
下面是一个改变鼠标右键的默认事件案例:
<!doctype html> <html> <head> <!--声明当前页面编码集(中文编码<gbk,gb2312>,国际编码<utf-8>)--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="keywords" content="关键词,关键词"> <meta name="description" content=""> <title> html </title> <style type="text/css"> *{padding:0px;margin:0px;} body{height:2000px;} </style> </head> <body> <script> /*屏蔽鼠标右键的默认事件*/ document.oncontextmenu = function(){ return false; }; /*屏蔽按空格键是滚动条向下滚动*/ document.onkeydown = function(ev){ var e = ev||event; if(e.keyCode == 32){ return false; } } </script> </body> </html>
下面是一个改变鼠标右键的默认事件案例:
<!doctype html> <html> <head> <!--声明当前页面编码集(中文编码<gbk,gb2312>,国际编码<utf-8>)--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="keywords" content="关键词,关键词"> <meta name="description" content=""> <title> html </title> <style type="text/css"> *{padding:0px;margin:0px;} #box{display:none;width:150px;height:200px;background:gray;position:fixed;} </style> </head> <body> <div id="box"></div> <script> var obox = document.getElementById("box"); /*点击鼠标右键时执行*/ document.oncontextmenu = function(ev){ var e = ev||window.event; var x = e.clientX; var y = e.clientY; obox.style.cssText = "display:block;top:"+y+"px;left:"+x+"px;"; return false; }; /*点击空白处隐藏*/ document.onclick = function(){ obox.style.display = "none"; }; </script> </body> </html>
相关文章推荐
- malloc、realloc、calloc区别
- 用C语言实现发红包的软件算法
- 使用zkClient连接zookeeper服务
- url-pattern格式:
- PJSIP2.5.1编译
- CodeForces 347A Difference Row
- Android Design Support Library初探,NavigationView实践
- 通过浏览器下载放在win7 IIS网站下的apk
- UIStackView 结合UIScrollView滑动显示
- 解决chrome和IE下字号不一样现象
- 【UVA10829】 L-Gap Substrings (后缀数组)
- 浏览器是怎样工作的:渲染引擎,HTML解析(连载二)
- Duplicate Symbol链接错的原因总结和解决方法-b
- Viewport 模板
- 第4条:消除过期的对象
- mysql_config_editor工具
- [从头读历史] 第310节 星球战争 BC2399 至 BC2300(公元前24世纪)
- c语言实现读取txt文件内容到结构体数组中
- 1077. Kuchiguse (20)
- 【Heritrix 02】Heritrix包介绍