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>
结果如下图所示：
9025
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
