function touchMove(event) {
if(event.touches.length > 1 || event.scale && event.scale !== 1 ) return;
var touch = event.targetTouches[0];
endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0;
clearInterval(auto);
if(isScrolling === 0){
clearTimeout(timeOutEvent);
event.preventDefault();
oUl.style.left = iLeft + endPos.x + 'px';
}
}
function touchEnd(event) {
if(window.endPos) {
if( endPos.x < -30 ) {
oBtnNext.onclick();
}
else if( endPos.x > 30 ) {
oBtnPrev.onclick();
}
endPos.x = 0;
}
auto = setInterval(oBtnNext.onclick,5000);
clearTimeout(timeOutEvent);
oUl.removeEventListener("touchmove", touchMove, false);
document.removeEventListener("touchend", touchEnd, false);
}
function longPress(){
timeOutEvent = 0;
return true;
}
}
//自动播放
var auto = setInterval(oBtnNext.onclick, 5000);
oPPager.onmouseover = oBtnPrev.onmouseover = oBtnNext.onmouseover = oUl.onmouseover = function(){
clearInterval(auto);
}
oBtnPrev.onmouseout = oBtnNext.onmouseout = oUl.onmouseout = function() {
auto = setInterval(oBtnNext.onclick, 5000);
}
做了一个移动端跟PC通用的幻灯片效果,别的浏览器都没问题,但是QQ内置浏览器和微信内置浏览器(平板上这个2个内置浏览器又正常...),手指划快一点后,自动播放就会变的飞快,如果拿掉最后的oUl.onmouseout = function() {auto = setInterval(oBtnNext.onclick, 5000);}问题又不会出现,所以我想是不是onmouseout对touchend有影响,请问一下大家,这个该怎么解决。
问题终于解决了,最后把oUl.onmouseout换成onmoudeleave居然就好了
学习了。其实我感觉微信内置浏览器上问题很多啊。。。。。,。
onmouseout如果移动到子元素上也会触发的,需要判断下是否移动到的子元素。mouseleave的话移动到子元素不会触发,只有完全移除这个元素才会触发,所以使用事件的时候也需要注意一下
受教了,呵呵!!!!!!