<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>鼠标滚动</title>
<style>
input{
display:inline-block;
}
</style>
</head>
<body>
<div>
<input type="text" value="0">
<input type="text" value="0">
<input type="text" value="0">
</div>
</body>
<script>
var div = document.getElementsByTagName("div")[0];
var ev = event || ev ;
div.onmouseover = function(ev){ //事件委托
var tag = ev.target;
tag.onmousewheel = function(ev){ //滚轮事件 ie 与标准浏览器
var scr = ev.wheelDelta
scr<0?scr = 1:scr = -1;
var n = parseInt(this.value);
console.log(this);
if(n+scr>=0){
this.value = n+scr;
}else{
this.value = 0 ;
}
}
tag.addEventListener('DOMMouseScroll',function(ev){ //火狐浏览器
// console.log(ev.detail) // 下 3 上 -3
var scr = ev.detail
var n = parseInt(this.value);
scr<0?scr = -1:scr = 1;
if(n+scr>=0){
this.value = n+scr;
}else{
this.value = 0 ;
}
})
}
</script>
</html>
滚轮案例,在表单上滚动滚轮,增减表单数字 事件委托 滚轮事件
最新推荐文章于 2023-06-12 16:28:17 发布