touchend中的touches没有坐标点
时间: 2024-05-14 08:19:19 浏览: 13
是的,`touchend`事件中的`touches`属性是一个空的列表,因为当手指离开屏幕时,已经没有手指在屏幕上触摸了,所以也就没有触摸点的坐标信息了。但是,`touchend`事件对象中的`changedTouches`属性仍然包含了离开屏幕的手指的信息,包括手指的唯一标识符、坐标点、时间戳等信息。因此,如果你想在`touchend`事件中获取离开屏幕手指的坐标点,可以使用`changedTouches`属性来获取。例如:
```
element.addEventListener('touchend', function(event) {
var touch = event.changedTouches[0];
var x = touch.pageX;
var y = touch.pageY;
console.log('Touch end at (' + x + ', ' + y + ')');
}, false);
```
相关问题
触摸事件中touchstar、touchmove、touchend、touchcancel事件应用方法及实例
在移动端开发中,触摸事件是非常常见的一种事件,而其中最常用的就是touchstart、touchmove、touchend、touchcancel事件。
1. touchstart事件
当手指触摸屏幕时,会触发touchstart事件。touchstart事件触发后,会返回一个TouchEvent对象,其中包含了一些关于触摸点的信息,如触摸点的坐标、触摸点的标识符等。
以下是一个touchstart事件的实例:
```javascript
document.addEventListener('touchstart', function(event) {
console.log('触摸点的坐标:', event.touches[0].clientX, event.touches[0].clientY);
});
```
2. touchmove事件
当手指在屏幕上移动时,会触发touchmove事件。和touchstart事件一样,touchmove事件也会返回一个TouchEvent对象,其中包含了关于移动后触摸点的信息。
以下是一个touchmove事件的实例:
```javascript
document.addEventListener('touchmove', function(event) {
console.log('移动后触摸点的坐标:', event.touches[0].clientX, event.touches[0].clientY);
});
```
3. touchend事件
当手指离开屏幕时,会触发touchend事件。touchend事件同样会返回一个TouchEvent对象,其中包含了关于离开屏幕后的触摸点信息。
以下是一个touchend事件的实例:
```javascript
document.addEventListener('touchend', function(event) {
console.log('离开屏幕后的触摸点的坐标:', event.changedTouches[0].clientX, event.changedTouches[0].clientY);
});
```
4. touchcancel事件
当由于某些原因(如系统中断)触摸事件被取消时,会触发touchcancel事件。touchcancel事件同样会返回一个TouchEvent对象,其中包含了关于取消前的触摸点信息。
以下是一个touchcancel事件的实例:
```javascript
document.addEventListener('touchcancel', function(event) {
console.log('取消前的触摸点的坐标:', event.touches[0].clientX, event.touches[0].clientY);
});
```
以上就是touchstart、touchmove、touchend、touchcancel事件的应用方法及实例。
我想在微信小程序里用用坐标定位平面图中的某个点,而且还能缩放
好的,对于你的需求,可以通过在微信小程序中使用canvas来实现。你需要在canvas上绘制平面图,并且实现缩放和定位功能。具体步骤如下:
1. 在微信小程序的wxml文件中添加canvas组件,并设置宽高和id:
```
<canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas>
```
2. 在js文件中获取canvas的上下文,并且绘制平面图:
```
const ctx = wx.createCanvasContext('myCanvas');
ctx.drawImage('path/to/image.png', 0, 0, canvasWidth, canvasHeight);
```
3. 实现缩放功能。可以通过使用touchstart、touchmove和touchend事件来实现:
```
let distance = 0;
let scale = 1;
let touchNum = 0;
let touchX = 0;
let touchY = 0;
canvas.addEventListener('touchstart', (e) => {
touchNum = e.touches.length;
if (touchNum === 2) {
distance = Math.sqrt(Math.pow((e.touches[0].clientX - e.touches[1].clientX), 2) + Math.pow((e.touches[0].clientY - e.touches[1].clientY), 2));
touchX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
touchY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
}
});
canvas.addEventListener('touchmove', (e) => {
if (touchNum === 2) {
let newDistance = Math.sqrt(Math.pow((e.touches[0].clientX - e.touches[1].clientX), 2) + Math.pow((e.touches[0].clientY - e.touches[1].clientY), 2));
scale = scale * (newDistance / distance);
distance = newDistance;
ctx.translate(touchX, touchY);
ctx.scale(scale, scale);
ctx.translate(-touchX, -touchY);
ctx.drawImage('path/to/image.png', 0, 0, canvasWidth, canvasHeight);
}
});
canvas.addEventListener('touchend', (e) => {
touchNum = e.touches.length;
});
```
4. 实现定位功能。可以通过在canvas上添加点击事件来实现:
```
canvas.addEventListener('tap', (e) => {
let x = e.touches[0].clientX;
let y = e.touches[0].clientY;
// 根据点击的坐标计算出在平面图上的实际坐标
let realX = x / scale - touchX / scale;
let realY = y / scale - touchY / scale;
// 在canvas上绘制标记
ctx.beginPath();
ctx.arc(x, y, 5, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();
ctx.closePath();
ctx.drawImage('path/to/image.png', 0, 0, canvasWidth, canvasHeight);
});
```
这样就可以实现在微信小程序中使用坐标定位平面图中的某个点,并且还能缩放了。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)