手机端的click

一: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(event){
                if(obj.data("move")){
                    return;
                }else{
　　　　　　　　　　　　if(typeof callback==="function"){
　　　　　　　　　　　　　　callback(obj,event);
　　　　　　　　　　　　}
                }
                obj.data("move",false);
            });
        });
    };
})(jQuery);

$("#div").touchClick(function(self,event){
    self.hide();
});

二:移动端touch事件的跨页传递.

现在又A,B两个页面.上面各有一个元素#a,#b.在当前页面的同样位置.

$("#a").on("touchend",function(){
    window.location.href="B.html";
});

$("#b").on("touchend",function(){
    alert("B");
});

点击a之后直接跳转到B.html.但是诡异的是.触发了b元素的touch事件.

解决办法.

$("#a").on("touchend",function(){
    window.location.href="B.html";
    return false
});

click事件有三个过程.手按下,手滑动,手抬起.

重新封装touchclick,使其可以出发这三个事件:

(function(){
    var defaults={
        start:function(self,event){},
        move:function(self,event){},
        end:function(self,event){}
    }
    $.fn.touchClick1=function(opts){
        opts=$.extend({}, defaults,opts);
        this.each(function(){
            var obj=$(this);
            obj.on("touchstart",function(event){
                obj.data("move",false);
                return opts.start(obj,event);
            }).on("touchmove",function(event){
                obj.data("move",true);
                return opts.move(obj,event);
            }).on("touchend",function(event){
                if(obj.data("move")){
                    return;
                }else{
                    return opts.end(obj,event);
                }
                obj.data("move",false);
            });
        });
    };
})(jQuery);

上面的写法有个弊端，每次想访问当前对象的都得使用self.不太好。如果直接用this不是更好么。改写上面的代码

(function(){
    var defaults={
        start:function(self,event){},
        move:function(self,event){},
        end:function(self,event){}
    }
    $.fn.touchClick=function(opts){
        if(typeof opts=="function"){
            opts=$.extend({}, defaults,{end:opts});
        }else{
            opts=$.extend({}, defaults,opts);
        }
        this.each(function(){
            var obj=$(this);
            obj.on("touchstart",function(event){
                obj.data("move",false);
                opts.start.call(this,event);
            }).on("touchmove",function(event){
                obj.data("move",true);
                opts.move.call(this,event);
            }).on("touchend",function(event){
                if(obj.data("move")){
                    return;
                }else{
                    opts.end.call(this,event);
                }
                obj.data("move",false);
            });
        });
    };
})(jQuery);