JS基礎_滾輪的事件

ZHOU_VIP發表於2020-12-12
JS事件
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
				
				
				//獲取id為box1的div
				var box1 = document.getElementById("box1");
				
				//為box1繫結一個滑鼠滾輪滾動的事件
				/*
				 * onmousewheel滑鼠滾輪滾動的事件，會在滾輪滾動時觸發，
				 * 	但是火狐不支援該屬性
				 * 
				 * 在火狐中需要使用 DOMMouseScroll 來繫結滾動事件
				 * 	注意該事件需要通過addEventListener()函式來繫結
				 */
				
				
				box1.onmousewheel = function(event){
					
					event = event || window.event;
					
					
					//event.wheelDelta 可以獲取滑鼠滾輪滾動的方向
					//向上滾 120   向下滾 -120
					//wheelDelta這個值我們不看大小，只看正負
					
					//alert(event.wheelDelta);
					
					//wheelDelta這個屬性火狐中不支援
					//在火狐中使用event.detail來獲取滾動的方向
					//向上滾 -3  向下滾 3
					//alert(event.detail);
					
					
					/*
					 * 當滑鼠滾輪向下滾動時，box1變長
					 * 	當滾輪向上滾動時，box1變短
					 */
					//判斷滑鼠滾輪滾動的方向
					if(event.wheelDelta > 0 || event.detail < 0){
						//向上滾，box1變短
						box1.style.height = box1.clientHeight - 10 + "px";
						
					}else{
						//向下滾，box1變長
						box1.style.height = box1.clientHeight + 10 + "px";
					}
					
					/*
					 * 使用addEventListener()方法繫結響應函式，取消預設行為時不能使用return false
					 * 需要使用event來取消預設行為event.preventDefault();
					 * 但是IE8不支援event.preventDefault();這個玩意，如果直接呼叫會報錯
					 */
					event.preventDefault && event.preventDefault();
					
					
					/*
					 * 當滾輪滾動時，如果瀏覽器有滾動條，滾動條會隨之滾動，
					 * 這是瀏覽器的預設行為，如果不希望發生，則可以取消預設行為
					 */
					return false;
					
					
					
					
				};
				
				//為火狐繫結滾輪事件
				bind(box1,"DOMMouseScroll",box1.onmousewheel);
				
				
			};
			
			
			function bind(obj , eventStr , callback){
				if(obj.addEventListener){
					//大部分瀏覽器相容的方式
					obj.addEventListener(eventStr , callback , false);
				}else{
					/*
					 * this是誰由呼叫方式決定
					 * callback.call(obj)
					 */
					//IE8及以下
					obj.attachEvent("on"+eventStr , function(){
						//在匿名函式中呼叫回撥函式
						callback.call(obj);
					});
				}
			}
			
		</script>
	</head>
	<body style="height: 2000px;">
		
		<div id="box1"></div>
		
	</body>
</html>

 

相關文章