盘点移动端的点击事件

最新推荐文章于 2023-12-19 11:23:41 发布

原创最新推荐文章于 2023-12-19 11:23:41 发布 · 3.8k 阅读

4 ·

CC 4.0 BY-SA版权

本文探讨了移动端点击事件的处理方式，对比click与tap的区别，并介绍了如何利用tap或touch事件优化用户体验，包括解决点透问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要有click , tap ,touch

一、click 和 tap 比较

两者都会在点击时触发，但是在手机WEB端，click会有 200~300 ms，所以请用tap代替click作为点击事件。

singleTap和doubleTap 分别代表单次点击和双次点击。

二、关于tap的点透处理

在使用zepto框架的tap来移动设备浏览器内的点击事件，来规避click事件的延迟响应时，有可能出现点透的情况，即点击会触发非当前层的点击事件。

处理方式：

（1）、https://github.com/ftlabs/fastclick

github上有一个叫做fastclick的库，它也能规避移动设备上click事件的延迟响应，https://github.com/ftlabs/fastclick
将它用script标签引入页面（该库支持AMD，于是你也可以按照AMD规范，用诸如require.js的模块加载器引入），并且在dom ready时初始化在body上，如：

<script type='application/javascript' src='/path/to/fastclick.js'></script>
//如果你想使用jquery
$(function(){

    //newFastClick(document.body);
    FastClick.attach(document.body);

})
//如果你使用原生js开发则进行如下声明即可。
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}
//如果你在使用CommonJS风格的框架，比如requirejs
var attachFastClick = require('fastclick');
attachFastClick(document.body);
//AMD
var FastClick = require('fastclick');
FastClick.attach(document.body, options);

然后给需要“无延迟点击”的元素绑定click事件（注意不再是绑定zepto的tap事件）即可。
当然，你也可以不在body上初始化它，而在某个dom上初始化，这样，只有这个dom和它的子元素才能享受“无延迟”的点击

实践开发中发现，当元素绑定fastclick后，click响应速度比tap还要快一点点。哈哈

（2）为元素绑定touchend事件，并在内部加上e.preventDefault();


$demo.on('touchend',function(e){//

 改变了事件名称，tap是在body上才被触发，而touchend是原生的事件，在dom本身上就会被捕获触发

    $demo.hide()

    e.preventDefault();//

 阻止“默认行为”

})

三、touch事件touch是针对触屏手机上的触摸事件。现今大多数触屏手机webkit内核提供了touch事件的监听，让开发者可以获取用户触摸屏幕时的一些信息。

其中包括：touchstart,touchmove,touchend,touchcancel 这四个事件

touchstart,touchmove,touchend事件可以类比于mousedown，mouseover

，mouseup的触发。

touchstart ：当手指触摸到屏幕会触发；

touchmove : 当手指在屏幕上移动时，会触发；

touchend : 当手指离开屏幕时，会触发；

而touchcancel许多人不知道它在什么时候会被触发而忽略它，其实当你的手指还没有离开屏幕时，有系统级的操作发生时就会触发touchcancel，例如alert和confirm弹框，又或者是android系统的功能弹窗。

touch事件的小应用:

// 实现滑动的大概代码

// 滑动元素translateX的初始值
var iscroll = device_width,

    // 用来计算的中间值
    istarX = 0,

    // 手指第一次点在屏幕上的x坐标
    istart_pageX = 0; 

// 绑定事件
$area.on('touchstart', touchstart)
     .on('touchmove', touchmove)
     .on('touchend', touchend);

function touchstart(event) {
    event.preventDefault();
    istartX = iscroll;
    istart_pageX = event.originalEvent.changedTouches[0].pageX;
}

function touchmove(event) {

    // 滑动过程中手指位置x坐标会不停变动，这里会保存一个当前位置与初始位置的一个差值
    var distance = event.originalEvent.changedTouches[0].pageX - istart_pageX;
    iscroll = istartX + distance;

    // 这里是我自定义的一个css方法，用来设置元素translateX的当前值
    Utils.css(area, { translateX: iscroll });
}

function touchend(event) {
    var distance = event.originalEvent.changedTouches[0].pageX - istart_pageX;
    $area.off('touchstart touchmove touchend');

    // 根据差值的不同，执行不同的动作
    if (distance < -80) {
        slideNext(function() {
            addEventSlider($area);
        })
    }
    else if (distance > 80) {
        slidePrev(function() {
            addEventSlider($area);
        })
    }
    else if (distance == 0) {        
        /* 当差值为0时，我认为这是执行了一次点击 */

        addEventSlider($area);
    }
    else {
        ani(area).animate(400, 'easeout', { x: -device_width }, function() {
            iscroll = -device_width;
            addEventSlider($area);
        })
    }
}