各浏览器的鼠标滚轮事件

2019-7-11
之前看尚硅谷李立超的JS基础,发现其中的鼠标滚轮事件与现在使用的有一些出入。

			/*
			 * 简单来说,如果不需要兼容IE浏览器,则使用 onwheel 属性即可
			 */
			box1.onwheel = function(){
				//代码..
			}
			
			/*
			 * 如果需要兼容IE浏览器,则需要结合 onmousewheel 和 onwheel 属性(代码及结构可自行优化)
			 */
			//只对Chrome和IE有效
			box1.onmousewheel = function(){
				//代码...
			}
			//只对IE无效
			box1.onwheel = function(){
				//代码...
			}
			
			/*	
			 * 现在大多用 event.deltaY 进行滚轮取值与判断
			 * 在各浏览器中滚轮取值如下:
			 * 		-	火狐:向上为-3,向下为3	
			 * 		- Chrome:向上为-125,向下为125
			 * 		-	Edge:向上为-135.60000610351562,向下为135.60000610351562
			 * 		-	360:向上为-100,向下为100
			 * 		-	搜狗:向上为-100,向下为100								
			 */
			alert(event.deltaY);
			/*
			 * 至于IE浏览器的滚轮取值与判断,视频中使用 event.wheelDelta 可操作,
			 * 	 但我自己操作的时候IE却没有反应,可能是我自己的问题,大家自行测试
			 */
			 
		 	/*
			 * 	测试时各浏览器版本如下:
			 * 		-  chrome:75.0.3770.100(正式版本)
			 * 		-  360浏览器:11.0.2140.0  内核版本:69.0.3497.100
			 * 		-  搜狗浏览器:8.5.10.30498
			 * 		-  火狐浏览器:68.0
			 * 		-  Edge:42.17134.1.0  EdgeHTML:17.17134
			 * 		-  IE:IE8、IE9、IE10、IE11
			 */
			

<!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">
			
				/*
				 * 2019-7-11
				 * 	现在这一集视频中的方法、属性已经过时或失效
				 */
				
				/*
				 * 需求:在box1范围内,当鼠标滚轮向下滚动时,box1变长,
				 * 				 当鼠标向上滚动时,box1变短	
				 */
			
			window.onload = function(){
				
				//获取id为box1的div
				var box1 = document.getElementById("box1");
				
				//为box1绑定一个鼠标滚轮滚动的事件
				/*
				 * 视频中使用的是 onmousewheel 属性
				 * onmousewheel 属性在火狐中无效,在Chrome和IE(包括各版本IE)中有效
				 * 	注意:该属性已经过时,现在是使用 onwheel 属性
				 */
//				box1.onmousewheel = function(){
//					alert("滚了");
//				}

				/*
				 * onwheel 属性对除IE外的浏览器都支持(即,对Chrome和火狐都支持),
				 * 					因此不需要视频中的 DOMMouseScroll属性来针对火狐
				 * onmousewheel 属性对Chrome和IE有效
				 * 	因此,除两者结合使用
				 */
//				//对Chrome和IE有效
//				box1.onmousewheel = function(){
//				alert("滚了1");
//				}
//				//对除IE外有效
//				box1.onwheel = function(){
//				alert("滚了2");
//				}
				//两段代码都写,此时三个浏览器都生效
				//对于Chrome来说,两段代码都有效,因此因为执行顺序而下面的代码覆盖了上面的,因此输出结果为:滚了2
				/*
				 * 其他浏览器:
				 * 					-	搜狗浏览器:两个属性都支持,代码执行与Chrome相同
				 * 					- 360浏览器:两个属性都支持,代码执行与Chrome相同
				 * 					- Edge:两个属性都支持,代码执行与Chrome相同
				 */
				/*
				 * 因此,如果项目需要兼容IE浏览器,则需要使用onmousewheel属性,
				 * 	 如果不需要兼容IE,则以下浏览器使用onwheel即可:
				 * 		Chrome、360、搜狗、火狐、Edge
				 */
				
				//为box1绑定一个鼠标滚轮滚动的事件
				box1.onwheel = function(event){
					event = event || window.event;
					//判断鼠标滚轮滚动的方向
					/*
					 * 视频中用 event.wheelDelta 可以获取鼠标滚轮滚动的方向
					 * 	向上为150,向下为-150
					 * 		注意:滚轮的滚动只需要看正负号,不需要关心具体的数值
					 * 	这个属性火狐中不支持
					 * 	注意:event.wheelDelta 属性现在火狐中滚轮向上、向下取值都是0,
					 * 				即,该方法现在在火狐中失效
					 * 				在Edge中有效,向上为120,向下为-120
					 */
					/*
					 * 但是,视频中这个属性在IE中有效,我自己操作的时候却无效??????
					 */
//					alert(event.wheelDelta);
					
					/*	
					 * 现在大多用 event.deltaY 进行滚轮取值与判断
					 * 在各浏览器中滚轮取值如下:
					 * 		-  火狐:向上为-3,向下为3	
					 * 		-  Chrome:向上为-125,向下为125
					 * 		-  Edge:向上为-135.60000610351562,向下为135.60000610351562
					 * 		-  360:向上为-100,向下为100
					 * 		-  搜狗:向上为-100,向下为100								
					 */
//					alert(event.deltaY);
					
					//判断鼠标滚轮滚动的方向
					if(event.deltaY < 0){
						//向上滚,box1变短
						//clientHeight位可见高度
						box1.style.height = box1.clientHeight - 10 + "px";
					}else if(event.deltaY > 0){
						//向下滚,box1变长
						box1.style.height = box1.clientHeight + 10 + "px";
					}
					
					/*
					 * 使用addEventListener()方法绑定响应函数,取消默认行为时不能使用return false
					 * 需要使用event来取消默认行为event.preventDefault();
					 * 但是IE8不支持event.preventDefault();,如果直接调用会报错
					 */
//					event.preventDefault && event.preventDefault();
				
					
					/*
					 * 当滚轮滚动时,如果浏览器有滚动条,滚动条会随之滚动,
					 * 这是浏览器的默认行为,如果不希望发生,则可以取消默认行为
					 */
					return false;

				}

			};
			
			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>

结果如下图所示:
各浏览器的鼠标滚轮事件_第1张图片

你可能感兴趣的:(前端,H5)