鼠标的默认事件之oncontextmenu及其案例

当我们在浏览器中点击鼠标右键时会弹出一个默认的窗口，我们可以通过改变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>

转载于:https://www.cnblogs.com/wanglitao/p/5685107.html

鼠标的默认事件之oncontextmenu及其案例相关推荐

事件（阻止事件传播、阻止默认事件、事件源对象、事件委托）
阻止事件传播阻止事件传播e.stopPropagation() 谷歌浏览器阻止事件传播(冒泡阶段) var oBig = document.getElementById('big');var oS ...
简单的鼠标和键盘事件+阻止默认阻止冒泡+dom0，dom2
什么是事件在我们学习DOM之后,事件就是我们必不可少的一块知识点了,事件其实就是我们的一些操作需要在用户来完成之后才执行的.比如我们PC端的点击事件,键盘事件,以及我们移动端的的触屏事件.接下来咱们 ...
JS事件对象5--阻止默认事件(鼠标事件)
阻止默认事件的两种方式和兼容方式: <script type="text/javascript">//阻止系统默认事件的两种方式://1.IE:return false ...
JS鼠标事件，简单画画案例
效果点击一次可以移动鼠标画画点击二次停止移动鼠标画画 <!DOCTYPE html> <html><head><meta charset="ut ...
右击阻止默认事件和右击显示菜单
阻止右击默认事件方式: 1. 阻止页面上的默认事件:(在页面上的右击事件都将被禁止) document.oncontextmenu = function () {// e.preventDefault ...
如何解决onclick与onmousedown,onmouseup的冲突，取消默认事件
onclick是点击,一个完整的点击动作由按下鼠标键onmousedown,和弹起鼠标键onmouseup完成,所以很多时候,onclick事件和onmousedown,onmouseup混用的时候会 ...
设置网页右键点击，并阻止右键点击默认事件
设置网页右键点击,并阻止右键点击默认事件 //为当前文档添加鼠标右击事件,防止默认的右击菜单弹出 document.oncontextmenu=Youji; function Youji(){aler ...
50 jQuery绑定事件阻止默认事件发生内置动画 each data
主要内容 1 阻止后续事件继续执行 return false: 常用于表单提交 event.preventDefault : 阻止默认事件发生 <body> <form acti ...
jquery-滚轮事件与函数节流-案例整屏滚动 -等待整理
源代码 https://cloud.189.cn/t/Ivi2mqZvyq2i 练习用,无效果的 https://cloud.189.cn/t/ieaii2E7Vriy (整屏滚动练习源码) 滚轮事件 ...

鼠标的默认事件之oncontextmenu及其案例

鼠标的默认事件之oncontextmenu及其案例相关推荐

最新文章

热门文章