[jQuery Mobile] jQueryMobile的vmousemove事件

手指在触摸屏上滑动时,该事件会连续触发,
所以,最好在事件内增加标志位,避免触发多次。

在此事件中,如果使用addClass为元素增加样式,
会造成滑动停止时,元素的样式才发生变化,
这是因为短时间一直改变元素的样式,浏览器进行了保护,避免频繁刷新元素样式。

注意:
(1)重复使用addClass添加相同名字的样式,jQuery并不会增加多个同名class。
(2)虽然不会出现多个同名class,但是浏览器还是会等class短时间不再改变的时候,再刷新元素。Chrome,IE均如此。

$(document).bind('vmousemove',function(e){

    //避免重复添加样式
    if(container.hasClass('testClass')){
        return;
    }
    
    //只有滑动足够长的距离才会添加样式
    // mousedownClientY:vmousedown的e.clientY
    // SHORTEST_DISTANCE:最短滑动距离,可以设置为150
    var isSlideUpEffective=(mousedownClientY-e.clientY>SHORTEST_DISTANCE);

    if(!isSlideUpEffective){
        return;
    }
    
    container.addClass('testClass');
});

这样处理,才能在滑动一段距离后,为元素添加样式,并且马上会刷新元素。

你可能感兴趣的:([jQuery Mobile] jQueryMobile的vmousemove事件)