PointerEvent中的movementX/movementY属性

最新推荐文章于 2024-06-30 18:20:39 发布

比丝甘特

最新推荐文章于 2024-06-30 18:20:39 发布

阅读量332

点赞数

分类专栏： js html 文章标签： javascript 前端

本文链接：https://blog.csdn.net/zhengsr12345/article/details/134608499

版权

js 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

在使用PointerEvent过程中发现了一个有意思的属性，即movementX/movementY，该属性在mdn文档里说是相对于最后一次鼠标移动位置的位置，这个值一般不会很大，且会出现正负。比如对于movementX，在某一时刻的返回值是-1，则表示本次鼠标移动事件触发时鼠标相对于上次事件移动了1px，且是向左移动（左负右正）。这个属性对于实现滑块移动很有帮助，这里给出一个简单的案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>example</title>
</head>
<body style="margin: 0px;">
    <div style="width: 200px;height: 10px;background-color: #a0a0a0;margin: 50px;position: relative;">
		<div id="jdjq" style="width: 10px;height: 50px;background-color: #3389fc;position: absolute;left: 60px;top: -20px;"></div>
	</div>
    <script>
        const slider = document.getElementById('jdjq');
		let pointerid = 0;
		let movecount = 0;
		slider.addEventListener('pointerdown',function(e){
			pointerid = e.pointerId;
			slider.setPointerCapture(pointerid);
		});
		slider.addEventListener('pointermove',function(e){
			if(e.pointerId===pointerid){
				movecount += e.movementX;
				if(movecount<-60){
					slider.style.left = '0px';
				}
				else if(movecount>130){
					slider.style.left = '190px';
				}
				else{
					slider.style.left = 60+movecount+'px';
				}
			}
		});
		slider.addEventListener('pointerup',function(e){
			pointerid = 0;
		});
		slider.addEventListener('pointercancel',function(e){
			pointerid = 0;
		});
    </script>
</body>
</html>

在这里稍微提一下PointerEvent，该事件继承自MouseEvent，它集成了鼠标和触摸事件的优点，也就意味着它经过合理设置可以替代鼠标和触摸事件，具有良好的复用性和跨平台能力。它的用法大致上跟鼠标事件差不多但略有区别，具体可以参考mdn文档。详见PointerEvent - Web APIs | MDN。