input 鼠标滚动事件

最新推荐文章于 2023-11-22 17:22:20 发布

夏日de烟火

最新推荐文章于 2023-11-22 17:22:20 发布

阅读量335

点赞数

文章标签： js javascript jquery

本文链接：https://blog.csdn.net/qq_38905741/article/details/113242018

版权

	<body>
	<div>
        <div>
            <input type="text" id="wheel_1" class="wheelable" value="1" />
        </div>
        
         <div>
            <input type="text" id="wheel_2" class="wheelable" value="1"  />
        </div>
    </div>
</body>

**js部分：**
	$(function() {
		$("#wheel_1").hover(function(){
			EventUtil.addHandler(document,'mousewheel',onWheel);
			EventUtil.addHandler(document,'DOMMouseScroll',onWheel);
		},
		function(){
			EventUtil.removeHandler(document,'mousewheel',onWheel);
			EventUtil.removeHandler(document,'DOMMouseScroll',onWheel);
		});
		
		$("#wheel_2").hover(function(){
			EventUtil.addHandler(document,'mousewheel',onWheel);
			EventUtil.addHandler(document,'DOMMouseScroll',onWheel);
		},
		function(){
			EventUtil.removeHandler(document,'mousewheel',onWheel);
			EventUtil.removeHandler(document,'DOMMouseScroll',onWheel);
		});
	});
	
	
	// WITHOUT Plugin
	var EventUtil = {
	    addHandler: function(element, type, handler){
	        if (element.addEventListener){
	            element.addEventListener(type, handler, false);
	        } else if (element.attachEvent){
	            element.attachEvent("on" + type, handler);
	        } else {
	            element["on" + type] = handler;
	        }
	    },
		
		removeHandler: function(element, type, handler){
	        if (element.removeEventListener){
	            element.removeEventListener(type, handler, false);
	        } else if (element.detachEvent){
	            element.detachEvent("on" + type, handler);
	        } else {
	            element["on" + type] = null;
	        }
	    },
		
		getEvent: function(event) {
	        return event ? event : window.event;
	    },
		
		getTarget: function(event) {
			return event.target || event.srcElement;    
		},
		
		getWheelDelta: function(event) {
	        if (event.wheelDelta){
	            return event.wheelDelta;
	        } else {
	            return -event.detail * 40;
	        }
	    },
		
		preventDefault: function(event) {
	        if (event.preventDefault){
	            event.preventDefault();
	        } else {
	            event.returnValue = false;
	        }
	    }
	    
	};
	
	function onWheel(event) {
	
		event = EventUtil.getEvent(event);
		var curElem = EventUtil.getTarget(event);
		var curVal = parseInt(curElem.value);
		var delta = EventUtil.getWheelDelta(event);
		
		if (delta > 0) {
			curElem.value = curVal + 1;
		} else{ 
			curElem.value = curVal - 1;
		}
		
		EventUtil.preventDefault(event);
		
	}

夏日de烟火

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
input 鼠标滚动事件

<body> <div> <div> <input type="text" id="wheel_1" class="wheelable" value="1" /> </div> <div> <input type="text" id="wheel_2" class="wheelable" value="1" /.
复制链接

扫一扫