手机端拖拽事件,获取pageX和pageY坐标方式

手机端拖拽事件:

touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。

touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。

touchend事件:当手指从屏幕上离开的时候触发。

touchcancel事件:当系统停止跟踪触摸的时候触发。

调用方法:
(1)jquery方法:$(document).bind("touchend", function(e){});
(2)javascript方法:document.addEventListener("touchend",function(e){});

手机端获取pageX和pageY:

touchstart事件下获取:e.originalEvent.targetTouches[0].pageX。
touchmove事件下获取:e.originalEvent.targetTouches[0].pageX。
touchend事件的下获取:e.originalEvent.changedTouches[0].pageX 。


每个Touch对象包含的属性如下。

clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触目的DOM节点目标。


  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要用 JS 绘制可视化矩形,可以使用 HTML5 的 Canvas 元素。下面是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>绘制矩形</title> </head> <body> <canvas id="myCanvas" width="400" height="400"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var rect = {}; var drag = false; function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#FF0000"; ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h); } canvas.addEventListener("mousedown", function(e) { rect.startX = e.pageX - canvas.offsetLeft; rect.startY = e.pageY - canvas.offsetTop; drag = true; }); canvas.addEventListener("mouseup", function(e) { drag = false; }); canvas.addEventListener("mousemove", function(e) { if (drag) { rect.w = (e.pageX - canvas.offsetLeft) - rect.startX; rect.h = (e.pageY - canvas.offsetTop) - rect.startY; draw(); } }); </script> </body> </html> ``` 这段代码会在页面上创建一个 400 x 400 的 Canvas 元素,并且监听鼠标事件,当用户按下鼠标左键并移动时,会绘制一个红色的矩形。你可以通过鼠标拖动来改变矩形的大小和位置。 要获取矩形的坐标,只需要在鼠标松开的事件处理函数中,打印出 rect 对象的值即可: ```javascript canvas.addEventListener("mouseup", function(e) { drag = false; console.log(rect); }); ``` 这样就可以在控制台中看到 rect 对象的 startX、startY、w 和 h 属性,它们分别表示矩形左上角的坐标和宽度、高度。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值