js之滚轮事件-滚动改变大小 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		window.onload = function(){
			var ptS = document.getElementsByTagName('input');
			console.log(ptS)
			document.onclick = function(e){
				var ev = window.event || e;
				// console.log(ev.target.nodeName)
				if(ev.target.nodeName == 'INPUT'){
					ev.target.onmousewheel = function(e){
						var ev = window.event || e;
						if(ev.wheelDelta > 0){
							//向上 +1
							ev.target.value = parseInt(ev.target.value) + 1;
							//阻止默认行为
							return false;
						}else{
							//向下 -1
							ev.target.value = parseInt(ev.target.value) - 1;
							//阻止默认行为
							return false;
						}
					}
					//火狐兼容
					if(ev.target.addEventListener != undefined){
						ev.target.addEventListener('DOMMouseScroll',function(e){
							var ev = window.event || e;
							if(ev.detail < 0){
								//向上 +1
								ev.target.value = parseInt(ev.target.value) + 1;
								//阻止默认行为
								ev.preventDefault();
							}else{
								//向下 -1
								ev.target.value = parseInt(ev.target.value) - 1;
								//阻止默认行为
								ev.preventDefault();
							}
						})
					}
					
					
				}
			}
			
		}
	</script>
</head>
<body>
	<h2>鼠标选中某一个input，滚动滚轮改变数字大小</h2>
	<input type="text" name="" value="1" />
	<input type="text" name="" value="2" />
	<input type="text" name="" value="3" />
</body>
</html>

 

posted @ 2023-08-10 09:15  JackieDYH  阅读(84)  评论(0)  编辑  收藏  举报  来源