HTML5触摸事件touch

╰+哭是因爲堅強的太久メ 2021-12-12 16:04 356阅读 0赞

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

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

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

**touchcancel事件**：当系统停止跟踪触摸的时候触发。一些更高级别的事件发生的时候（如弹出信息）会取消当前的touch操作，即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。

通过TouchEvent.type属性来确定当前事件属于哪种类型。

这些事件都会冒泡，也都可以阻止。

**event.stopPropagation()方法**

这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。

**event.preventDefault()方法**

阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；

**return false  ；**

等于同时调用了event.stopPropagation()和event.preventDefault()

回到正题。

### **touch详解** ###

**identifier:**标识触摸的唯一id

**clientX**：触摸目标在视窗（览器的 `viewport）`中的x坐标。

**clientY**：触摸目标在视窗（览器的 `viewport`）中的y坐标。

**pageX**：触摸目标在页面中（document）的x坐标。

**pageY**：触摸目标在页面中（document）的y坐标。

**screenX**：触摸目标在屏幕中的x坐标。

**screenY**：触摸目标在屏幕中的y坐标。

**target**：手指最开始放在触摸设备上触发点所在位置的 `element`。

### touch跟踪触摸属性 ###

touch中**跟踪触摸**的属性还有以下三个

**touches**：表示当前跟踪的触摸操作的touch对象的数组。

**targetTouches**：特定于事件目标的Touch对象的数组。

**changeTouches**：表示自上次触摸以来发生了变化的Touch对象的数组。

这些数组为TouchList对象

touches.length>=targetTouches.length

### 简单体验 ###

html

<div id="box"></div>

js

function load() {
       document.addEventListener('touchstart', touch, false);
       document.addEventListener('touchmove', touch, false);
       document.addEventListener('touchend', touch, false);
    
       function touch(event) {	
    
           var event = event || window.event;
    
           //console.log(event);
    
           var oInp = document.getElementById("box");
    
           switch (event.type) {
    
               case "touchstart":
    
                 oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
                 break;
    
                case "touchend":
    
                oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[ 0].clientY + ")";
                break;
                case "touchmove":
                      //event.preventDefault();
    				  //event.stopPropagation();
                oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY +  ")";
                 break;
           }
       }
    }
     window.addEventListener('load', load, false);

### 封装移动端事件 ###

(function (window){  //传入window，提高变量的查找效率
        function myQuery(selector){  //这个函数就是对外提供的接口。
            //调用这个函数的原型对象上的_init方法，并返回
            return myQuery.prototype._init(selector);
        }
        myQuery.prototype = {
            /*初始化方法，获取当前query对象的方法*/
            _init: function (selector){
                if (typeof selector == "string"){
                    //把查找到的元素存入到这个原型对象上。
                    this.ele = window.document.querySelector(selector);
                    //返回值其实就是原型对象。
                    return this;
                }
            },
            /*单击事件：
             * 为了规避click的300ms的延迟，自定义一个单击事件
             * 触发时间：
             *   当抬起手指的时候触发
             *   需要判断手指落下和手指抬起的事件间隔，如果小于500ms表示单击时间。
             *
             *   如果是大于等于500ms，算是长按时间
             * */
            tap: function (handler){
                this.ele.addEventListener("touchstart", touchFn);
                this.ele.addEventListener("touchend", touchFn);
    
                var startTime,
                    endTime;
    
                function touchFn(e){
                    e.preventDefault()
                    switch (e.type){
                        case "touchstart":
                            startTime = new Date().getTime();
                            break;
                        case "touchend":
                            endTime = new Date().getTime();
                            if (endTime - startTime < 500){
                                handler.call(this, e);
                            }
                            break;
                    }
                }
            },
            /**
             * 长按
             * @param handler
             */
            longTag: function (handler){
                this.ele.addEventListener("touchstart", touchFn);
                this.ele.addEventListener("touchmove", touchFn);
                this.ele.addEventListener("touchend", touchFn);
                var timerId;
    
                function touchFn(e){
                    switch (e.type){
                        case "touchstart" :  //500ms之后执行
                            timerId = setTimeout(function (){
                                handler.call(this, e);
                            }, 500)
                            break;
                        case "touchmove" :
                            //如果中间有移动也清除定时器
                            clearTimeout(timerId)
                            break;
                        case "touchend" :
                            //如果在500ms之内抬起了手指，则需要定时器
                            clearTimeout(timerId);
                            break;
                    }
                }
            },
            /**
             * 左侧滑动。
                记录手指按下的左边，在离开的时候计算 deltaX是否满足左滑的条件
             *
             */
            slideLeft: function (handler){
                this.ele.addEventListener("touchstart", touchFn);
                this.ele.addEventListener("touchend", touchFn);
                var startX, startY, endX, endY;
    
                function touchFn(e){
                    e.preventDefault();
                    var firstTouch = e.changedTouches[0];
                    switch (e.type){
                        case "touchstart":
                            startX = firstTouch.pageX;
                            startY = firstTouch.pageY;
                            break;
                        case "touchend":
                            endX = firstTouch.pageX;
                            endY = firstTouch.pageY;
    //x方向移动大于y方向的移动，并且x方向的移动大于25个像素，表示在向左侧滑动
                            if (Math.abs(endX - startX) >= Math.abs(endY - startY) && startX - endX >= 25){
                                handler.call(this, e);
                            }
                            break;
                    }
                }
            },
            /**
             * 右侧滑动。
             *
             */
            rightLeft: function (e){
                //TODO:
            }
        }
        window.$ = window.myQuery = myQuery;
    })(window);

使用

$("div").tap(function (e){
        console.log("单击事件")
    })
    $("div").longTag(function (){
        console.log("长按事件");
    })
    
    $("div").slideLeft(function (e){
        console.log(this);
        this.innerHTML = "左侧滑动了....."
    })

代码

--------------------

--------------------

参考文章[https://blog.csdn.net/u012468376/article/details/72808761][https_blog.csdn.net_u012468376_article_details_72808761]

[https_blog.csdn.net_u012468376_article_details_72808761]: https://blog.csdn.net/u012468376/article/details/72808761

发表评论取消回复

表情：

评论列表（有 0 条评论，356人围观）

还没有评论，来说两句吧...

相关阅读

相关 Appium-Touch Perform(触摸执行)

Touch Perform Example Usage Description

ゞ浴缸里的玫瑰/ 2023年01月13日 01:51/ 0 赞/ 99 阅读

相关 Appium-Touch Up(触摸向上)

这里指触摸屏幕的向上动作 Touch Up Example Usage Support

梦里梦外;/ 2023年01月13日 01:42/ 0 赞/ 108 阅读

相关手机移动端-touch 手指触摸移动事件

touch：事件可以分为三个 touchstart，touchmove，touchend <!DOCTYPE html> <html lang="en">

缺乏、安全感/ 2022年12月22日 13:24/ 0 赞/ 215 阅读

相关 html 触摸屏页面,HTML5触摸屏touch事件使用实例1

1.源码： .divFixed \{ width: 100px; height: 100px; font-size: 15px; text-align: center

爱被打了一巴掌/ 2022年10月06日 05:45/ 0 赞/ 284 阅读

相关 HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

　　HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加

àì夳堔傛蜴生んèń/ 2022年09月19日 15:28/ 0 赞/ 371 阅读

相关 Touch事件分发

Touch事件分发中只有两个主角:ViewGroup和View。Activity的Touch事件事实上是调用它内部的ViewGroup的Touch事件，可以直接当成ViewGr

冷不防/ 2022年07月28日 11:40/ 0 赞/ 148 阅读

相关 HTML5触摸事件

取材自： [html5手机触屏touch事件介绍][html5_touch] [图解Js event对象offsetX, clientX, pageX, scre

朴灿烈づ我的快乐病毒、/ 2022年06月07日 00:49/ 0 赞/ 256 阅读

相关 HTML5触摸事件touch

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用

╰+哭是因爲堅強的太久メ/ 2021年12月12日 16:04/ 0 赞/ 357 阅读

相关 zepto touch事件

zepto touch事件击打事件 1、tap() 点击/敲打事件,只要点击就会触发,无论单双击 2、singleTap()

港控/mmm°/ 2021年07月24日 18:03/ 0 赞/ 404 阅读

相关 HTML5触摸事件(touchstart、touchmove和touchend)

HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享

本是古典何须时尚/ 2021年06月26日 16:06/ 0 赞/ 733 阅读