手机端的click

手机端的click事件不是太好用,

1.点击会有延迟,

2.会出现一个灰色区域

就想到了用touch事件代替.

touch事件有touchstart,touchmove,touchend.

在使用的时候会有这样的一种情况.

现在我想在一个元素上使用touch实现单击.

意思就是当我的手点下去,在抬起来后触发事件.

如果我绑定touchstart肯定是不行的:手还没抬起,就触发了事件.

如果绑定touchend.会有一些不友好的体验.

比如:我的手在元素上滑动,然后抬起,就会触发这个事件.

很明显有些时候我们只需要类似于单击事件.这种手滑动后不需要触发的事件.

下面这个代码就是一个移动端的click事件.

(function(){
    $.fn.touchClick=function(callback){
        this.each(function(){
            var obj=$(this);
            obj.on("touchstart",function(){
                obj.data("move",false);
            }).on("touchmove",function(){
                obj.data("move",true);
            }).on("touchend",function(e){
                if(obj.data("move")){
                    return;
                }else{
            if(typeof callback==="function"){
              callback(e,obj);
            } } obj.data(
"move",false); }); }); }; })(jQuery);
$("#div").touchClick(function(e,self){
    self.hide();
});

 

你可能感兴趣的:(手机端的click)