touch事件有哪些,它的三个列表有什么区别
时间: 2024-01-09 18:03:36 浏览: 91
touch事件是指用户在触摸屏幕时所触发的事件,主要包括以下几种:
1. touchstart:手指触摸屏幕时触发;
2. touchmove:手指在屏幕上滑动时触发;
3. touchend:手指从屏幕上移开时触发;
4. touchcancel:系统取消touch事件的时候触发,例如:手指触摸屏幕后,突然来了一个电话,此时系统会取消当前的touch事件。
touch事件的三个列表分别是:
1. touches:记录当前屏幕上所有触摸点的信息;
2. targetTouches:记录当前事件目标元素上的所有触摸点的信息;
3. changedTouches:记录当前事件触发时涉及到的所有触摸点的信息。
这三个列表的区别在于记录的触摸点信息不同。touches记录所有的触摸点信息,targetTouches记录当前事件目标元素上的触摸点信息,而changedTouches只记录当前事件涉及的触摸点信息。
相关问题
实现移动端touch事件的横向滑动列表效果并循环展示
实现移动端touch事件的横向滑动列表效果并循环展示的一种常见方法是使用CSS3的transform属性和JavaScript的Touch事件。
首先,创建一个容器 div,设置其宽度为视口宽度的倍数,如 300%。在容器内部创建多个 div 元素,分别放置需要展示的内容。
然后,通过CSS3的transform属性将容器的位置移动到第二个或第三个 div 元素的位置,使得第一个 div 元素在视口外不可见。
接下来,使用JavaScript监听Touch事件,根据手指在屏幕上的移动距离,通过改变容器的transform属性来实现横向滑动效果。同时,当容器滑动到最后一个 div 元素时,将其位置移动到第一个 div 元素的位置,实现循环展示的效果。
下面是一个实现横向循环滑动列表效果的示例代码:
HTML:
```html
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
```
CSS:
```css
.container {
width: 300%;
display: flex;
transition: transform 0.3s ease-in-out;
}
.item {
flex-basis: calc(100% / 3);
text-align: center;
font-size: 30px;
}
```
JavaScript:
```js
var container = document.querySelector('.container');
var startX, startY, moveX, moveY, distanceX, distanceY;
container.addEventListener('touchstart', function(e) {
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
});
container.addEventListener('touchmove', function(e) {
moveX = e.touches[0].clientX;
moveY = e.touches[0].clientY;
distanceX = moveX - startX;
distanceY = moveY - startY;
if (Math.abs(distanceX) > Math.abs(distanceY)) {
e.preventDefault();
container.style.transform = 'translateX(' + (-100 / 3 + distanceX / window.innerWidth * 100) + '%)';
}
});
container.addEventListener('touchend', function(e) {
if (distanceX > 0 && Math.abs(distanceX) > window.innerWidth / 5) {
container.style.transform = 'translateX(' + (-200 / 3) + '%)';
} else if (distanceX < 0 && Math.abs(distanceX) > window.innerWidth / 5) {
container.style.transform = 'translateX(' + '0' + '%)';
} else {
container.style.transform = 'translateX(' + (-100 / 3) + '%)';
}
});
container.addEventListener('transitionend', function() {
if (container.style.transform === 'translateX(' + (-200 / 3) + '%)') {
container.style.transition = 'none';
container.style.transform = 'translateX(' + (-100 / 3) + '%)';
setTimeout(function() {
container.style.transition = 'transform 0.3s ease-in-out';
}, 0);
} else if (container.style.transform === 'translateX(' + '0' + '%)') {
container.style.transition = 'none';
container.style.transform = 'translateX(' + (-100 / 3 * 2) + '%)';
setTimeout(function() {
container.style.transition = 'transform 0.3s ease-in-out';
}, 0);
}
});
```
在这个示例中,我们使用了Flex布局和CSS3的calc()函数来创建了一个横向排列的列表。Touch事件监听了用户的滑动操作,通过改变容器的transform属性来实现横向滑动效果。当滑动到最后一个 div 元素时,通过修改transform属性实现循环展示的效果。同时,我们还添加了一些防抖和节流的优化,使得滑动效果更加流畅。
用shell脚本用touch 命令创建三个文件
好的,您可以使用以下Shell脚本来创建三个文件:
```
#!/bin/bash
touch file1.txt
touch file2.txt
touch file3.txt
```
将上述代码保存为一个.sh文件,然后在终端中使用以下命令运行该脚本:
```
chmod +x script.sh
./script.sh
```
这将创建三个空文件:file1.txt,file2.txt和file3.txt。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)