码迷,mamicode.com
首页 > 其他好文 > 详细

鼠标滚轮事件

时间:2018-12-03 17:54:24      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:event   ||   odi   必须   else   head   listen   java   title   

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{
				width: 100px;
				height: 100px;
				background: red;
			}
		</style>
		<script>
			window.onload=function(){
				var oDiv=document.getElementById("div1");
//				ie/chrome : onmousewheel
//				event.wheelDelta
//				上:120 下:-120
//				firefox: DOMMouseScroll必须用addEventListener
//				event.detail
//				上:-3  下: 3
//				return false阻止的是  obj.on事件名称=fn  所触发的事件名称
//				addEventListener绑定的事件需要通过event下面的preventDefault();
				oDiv.onmousewheel=fn;
				if(addEventListener){
					oDiv.addEventListener(‘DOMMouseScroll‘,fn,false);
				}
				
				function fn(ev){
//					alert(1);
				var ev=ev||event;
				
//				alert(ev.wheelDelta);
//				alert(ev.detail);
				var b=true;
				if(ev.wheelDelta){
					b=ev.wheelDelta>0?true:false;
				}else{
					b=ev.detail<0?true:false;
				}
//				alert(b);
				if(b){
					this.style.height=this.offsetHeight-10+"px";
				}else{
					this.style.height=this.offsetHeight+10+"px";
				}
				if(ev.preventDefault){
					ev.preventDefault();
				}
				return false;
				}
				
				document.oncontextmenu=function(){
					return false;
				}
//				ie
//				document.attachEvent(‘contextmenu‘,function(){
//					return false;
//				});
//				火狐
				document.addEventListener(‘contextmenu‘,function(ev){
					ev.preventDefault();
				});
			}
		</script>
	</head>
	<body style="height: 2000px;">
		<div id="div1"></div>
	</body>
</html>

 

鼠标滚轮事件

标签:event   ||   odi   必须   else   head   listen   java   title   

原文地址:https://www.cnblogs.com/gxywb/p/10059774.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!