图片跟着鼠标飞封装鼠标xy轴的获取

最新推荐文章于 2022-02-24 19:46:58 发布

XiaoXiongV

最新推荐文章于 2022-02-24 19:46:58 发布

阅读量568

点赞数

分类专栏： js

js 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了一个JavaScript脚本，该脚本封装了事件监听器的坐标获取功能，确保了在不同浏览器环境下事件坐标（如鼠标位置）的一致性和兼容性。通过自定义的evt对象，实现了对可视区域及页面坐标系下事件触发点坐标的统一处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<script>
		var evt = {
			//window.event和事件参数对象e的兼容
			getEvent: function(evt) {
				return window.event || evt;
			},
			//可视区域的横坐标兼容
			getClientX: function(evt) {
				return this.getEvent(evt).clientX;
			},
			//可视区域的纵坐标兼容
			getClientY: function(evt) {
				return this.getEvent(evt).getClientY;
			},
			//页面向左卷曲出去的横坐标
			getScrollLeft: function() {
				return window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0;
			},
			//页面向上卷曲出去的纵坐标
			getScrollTop: function() {
				return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;
			},
			//相对于页面的横坐标
			getPageX:function(evt){
				return this.getEvent(evt).pageX?this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft();
			},
			//相对于页面的纵坐标
			getPageY:function(evt){
				return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop();
			}
		}
		//test
		document.onmousemove=function(e){
			my$("timg").style.left=evt.getPageX(e)+"px";
			my$("timg").style.top=evt.getPageY(e)+"px";
		}		
	</script>