触屏事件基础

刘大溜达

已于 2022-06-01 10:01:29 修改

阅读量771

点赞数

文章标签： javascript html5 html

于 2022-06-01 09:56:52 首次发布

本文链接：https://blog.csdn.net/LYM0411/article/details/125077899

版权

一、移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click 和 mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。

二、兼容DOM的触屏事件

1.touchstart 当手指触摸屏幕时触发

2.touchmove 当手指在屏幕上滑动时连续触发

3.touchend 当手指从屏幕上移开时触发

4.touchcancel 当系统停止跟踪触摸时触发

注：上述事件都会冒泡，也都可以取消，每个触摸事件的event对象都提供了在鼠标事件中常见的属性bubbles、cancelable view clientX clientY screenX screenY等

<script>
        // 1. 手指触摸DOM元素事件
        var div = document.querySelector('div');
        div.addEventListener('touchstart', function() {
            console.log('手指触摸到了');

        });
        // 2. 手指在DOM元素身上移动事件
        div.addEventListener('touchmove', function() {
            console.log('手指继续触摸');

        });
        // 3. 手指离开DOM元素事件
        div.addEventListener('touchend', function() {
            console.log('手指离开