Mr.J--JS学习（事件处理函数包装）

最新推荐文章于 2022-07-14 17:00:41 发布

End_less__

最新推荐文章于 2022-07-14 17:00:41 发布

阅读量381

点赞数 1

分类专栏： Javascript学习

本文链接：https://blog.csdn.net/Ms_yjk/article/details/87893848

版权

Javascript学习专栏收录该内容

49 篇文章 1 订阅

订阅专栏

//elem: Element,type: EventString, handle: EventListener
//事件处理函数

		function addEvent(elem,type,handle){
			if(elem.addEventListener){
				elem.addEventListener(type,handle,false);
			}else if(elem.attachEvent){
				elem.attachEvent('on'+type,function(){
					handle.call(elem);
				})
			}else{
				elem['on' + type] = handle;
			}
		}
		
//取消事件绑定函数
		function removeEvent(elem,type,handle){
			if(elem.removeEventListener){
				elem.removeEventListener('on' + type,handle,false);
			}
			else if(elem.detachEvent){
				elem.detachEvent("on" + type,handle);
			}else{
				elem["on" + type] = null;
			}
		}
//取消冒泡事件
		function stopBubble(event){
			
			if(event.stopPropagation()){
				event.stopPropagation();
			}else{
				//ie
				event.cancelBubble = true;
			}
			
		}
		
//阻止默认事件
		function cancelHandler(event){
			if(event.preventDefault){
				event.preventDefault();
			}else{
				event.returnValue = false;
			}
		}

实现一个拖拽功能：

function drag(elem){
			var disX,
				disY;
			addEvent(elem,'mousedown',function(e){
				var event = e || window.event;
				disX = event.pageX - parseInt(elem.style.left);
				disY = event.pageY - parseInt(elem.style.top);
				addEvent(document,'mousemove',mouseMove);
				addEvent(document,'mouseup',mouseUp);
				stopBubble(event);
				cancelHandler(event);
			});
			function mouseMove(e){
				var event = e || window.event;
				elem.style.left = event.clientX - disX + "px";
				elem.style.top = event.clientY - disY + "px";
			}
			
			function mouseUp(e){
				var event = e || window.event;
				removeEvent(document,'mousemove',mouseMove);
				removeEvent(document,'mouseup',mouseUp);
			}
		}

进行处理：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div style="left:0px;top:0px;width:100px;height:100px;background-color:aqua;position:absolute;border-radius:50%;"></div>
		<script type="text/javascript" src="../../js/tools.js" ></script>
		<script type = "text/javascript">
		var div = document.getElementsByTagName('div')[0];
		function drag(elem){
			var disX,
				disY;
			addEvent(elem,'mousedown',function(e){
				var event = e || window.event;
				disX = event.pageX - parseInt(elem.style.left);
				disY = event.pageY - parseInt(elem.style.top);
				addEvent(document,'mousemove',mouseMove);
				addEvent(document,'mouseup',mouseUp);
				stopBubble(event);
				cancelHandler(event);
			});
			function mouseMove(e){
				var event = e || window.event;
				elem.style.left = event.clientX - disX + "px";
				elem.style.top = event.clientY - disY + "px";
			}
			
			function mouseUp(e){
				var event = e || window.event;
				removeEvent(document,'mousemove',mouseMove);
				removeEvent(document,'mouseup',mouseUp);
			}
		}

        drag(div);
		
		</script>
	</body>
</html>

拖拽功能还有一些不太完善的地方，释放鼠标之后，div还是跟随着鼠标移动，求大神指点