JS 手指触摸屏幕生成小球 并且监听小球是否跟随手指移动
时间: 2023-10-14 09:25:32 浏览: 40
可以通过监听触摸事件,在触摸点生成一个小球,然后监听手指移动事件,使小球跟随手指移动。以下是一个简单的实现:
HTML代码:
```html
<div id="container"></div>
```
CSS代码:
```css
#container {
width: 100%;
height: 100%;
position: relative;
}
.ball {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
position: absolute;
}
```
JavaScript代码:
```javascript
var container = document.getElementById("container");
// 监听触摸事件
container.addEventListener(
"touchstart",
function (event) {
// 阻止默认事件
event.preventDefault();
// 获取触摸点坐标
var touch = event.touches[0];
var x = touch.clientX;
var y = touch.clientY;
// 创建小球
var ball = document.createElement("div");
ball.className = "ball";
ball.style.left = x + "px";
ball.style.top = y + "px";
container.appendChild(ball);
// 监听手指移动事件
container.addEventListener(
"touchmove",
function (event) {
// 阻止默认事件
event.preventDefault();
// 获取触摸点坐标
var touch = event.touches[0];
var x = touch.clientX;
var y = touch.clientY;
// 移动小球
ball.style.left = x + "px";
ball.style.top = y + "px";
},
false
);
},
false
);
```
以上代码中,首先监听了触摸事件`touchstart`,在触摸点生成一个小球,并且在小球上监听手指移动事件`touchmove`,使小球跟随手指移动。
相关推荐
![](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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)