如何解决移动端的点击事件？

JAVASCRIPT GULP

如何解决移动端的点击事件？

    

本来点击事件不应该成为一个问题，但是很可惜的是，在移动端的浏览器中，click事件有300ms左右的响应延迟，因此为了更好的用户体验便不能直接在移动端使用click为元素添加点击事件。

zepto.js为了解决这个问题，为我们提供了tap[轻击]来替换click，可是用了一段时间之后，发现tap事件存在一个点透问题，即能够触发元素下一层的点击事件，而使得该方案也变得问题多多。

好在目前也有许多的解决方案，让这个简单但是一波三折的问题得到了解决。

1、在移动端使用touchend事件代替click事件，使用方式如下

var clickEvent = 'ontouchend' in document ? 'touchend' : 'click';
$(ele).on(clickEvent, function(event) {
    // 如果在移动端，一定要记得阻止默认事件
    event.preventDefault();
    // do something
})

2、使用fastclick.js，点击可在github上查看详情

在jQuery/zepto中，用如下方式使用即可

(function($, undefined) {
    FastClick.attach(document.body);

    // 然后就可以直接绑定click事件了
    $(ele).click(function() {
        // do something
    });
})(Zepto);