手指在触摸屏上滑动时,该事件会连续触发,
所以,最好在事件内增加标志位,避免触发多次。
在此事件中,如果使用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');
});
这样处理,才能在滑动一段距离后,为元素添加样式,并且马上会刷新元素。