提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  IT要闻

当前栏目

【移动端】touch事件及穿透事件

2023-02-18 16:29:07 时间

bug收集：专门解决与收集bug的网站

网址：www.bugshouji.com

  1. touch 事件的来历

2007 苹果推出iphone，浏览器网页在iphone上显示时字体特别小，根本看不清楚

苹果的解决方案：

方案一：双指进行缩放

方案二：在屏幕上双击进行放大（单击300ms后，再单击才算双击），造成了，移动端点击事件，300ms 延迟的问题

解决方案，就是使用touch事件来替代

移动端新增touch事件 --- 只能使用现代事件进行添加

touchstart: 触摸开始

touchmove: 触摸移动

touchend: 触摸结束

touchcancel：touch 取消，如来电等

【扩展】：移动端touch、click、tap的区别

http://t.zoukankan.com/luo1240465012-p-9450627.html

  1. 添加touch 事件

代码如下：

<script type="text/javascript">
document.addEventListener('touchstart', function () {
console.log( 'touchstart' );
, false);
document.addEventListener( 'touchmove ', function () {
console.log( 'touchmove' );
}, false);
document.addEventListener( 'touchend ', function () {
console.log ( 'touchend ' );
}, false);
document.addEventListener( 'touchcancel', function () {
console.log( 'touchcancel');
, false);
setTimeout(function () {
    alert( 'blocked ' );  //使用alert 来模拟touchcancel 打断
, 3000);
</script>
  1. touch对象

注：touchstart 触摸开始后，不管touchmove , touchend 是否移出开始触摸的元素，e.target都是开始时触摸的元素dom.

<script type="text/javascript">
document.addEventListener( 'touchstart', function (e) {
    console.log(e.target);
, false);
document.addEventListener( 'touchmove', function (e){
    console.log(e.target);
, false);
document.addEventListener( 'touchend ' , function (e){
    console.log(e.target);
, false);
</ script>

e.touches : 在手机上的所有触点信息

e.changeTouches: 跟当前事件相关的所有触点信息

e.targetTouches：作用在当前元素上的所有触点信息

【扩展】touch事件中的touches、targetTouches和changedTouches详解

https://www.cnblogs.com/mengff/p/6005516.html

4. 封装 touch 事件

<script type="text/javascript">
; (function (doc){
    var Touch = function (selector) {
        return Touch.prototype.init(selector);
    }
    Touch.prototype = {
        init: function (selector) {
            if (typeof(selector) 'string') {
                this.elem = doc.querySelector(selector);
                return this;
            }
        },
        tap: function (callback){
            this.elem.addEventListener( 'touchstart' , fn, false);
            this.elem.addEventListener( 'touchend ' , fn, false);
            var sTime,eTime;
            function fn (e){
                e.preventDefault();
                switch (e.type){
                    case 'touchstart' :
                        sTime = new Date().getTime();
                        break;
                    case 'touchend ':
                        eTime = new Date( ).getTime();
                        if(eTime - sTime < 500){
                            callback.call(this,e);
                        }
                        break;
                }
            }
        },
        longtap: function (callback){
            this.elem.addEventListener( 'touchstart' , fn,false);
            this.elem.addEventListener( 'touchmove', fn, false);
            this.elem.addEventListener( 'touchend ' , fn, false);
            var t = null,
                _self = this;
            function fn (e){
                switch (e.type){
                    case 'touchstart ' :
                        t = setTimeout( function () {
                            callback.call(_self, e);
                        },500);
                        break;
                    case 'touchmove' :
                        clearTimeout(t);
                        t = null;
                        break;
                    case 'touchend':
                        clearTimeout(t);
                        t = null;
                        break;
                }
            }
        }
        window.$ = window.Touch = Touch;

})(document);
</script>

事件测试：

$('#box' ).tap(function (e) {
    console. log(e.changedTouches[o]);
});
$('#box' ).longtap( function (e) {
    console.log(e);
);

5. touch 事件的穿透

因click是在touch系列事件发生后300ms才触发的，混用click和touch肯定会导致穿透问题.

点击穿透现象的情况：

1) 蒙层问题

蒙层的关闭按钮绑定的是touch事件，而按钮下面元素绑定的是click事件，touch事件触发后，蒙层消失，300ms后这个点的click事件触发。

2) 跨页面点击穿透问题

如果按钮下面恰好是一个href属性的a标签，那么页面就会发生跳转（a标签跳转默认是click事件触发的）

解决问题：

方法一：自己封装tap事件不会有穿透问题，因为阻止了默认行为 e.preventDefault();

方法二：吃掉touch之后的click, 使用计时器，让touch后延迟350ms再隐藏蒙层

方法三：使用fastclick.js；可以直接写click事件

还有，其它方法，就不阐述了

苟有恒 , 何必三更眠五更起

相关文章