问题描述:
页面是手机移动端,给button添加了click事件,button的父页面添加了touch事件,导致button触发click事件的时候,总是默认触发父div的touch事件。
html里面有冒泡机制,触发子button的时候,父div的事件也会被触发,在手机端click事件默认延迟400ms这样会导致click事件失效。
解决方法:
这里用了比较笨的解决方法,event提供的防止冒泡的方法都不起作用,就用了event.target获取事件触发到底是父div还是button,如果是button直接用return false重点触发的事件。
代码如下:
onTouchStart: function(swiper){ //手动滑动中触发
if($(event.target).is('button')){
return false;
}else{
var touch = event.touches[0];
startY = touch.pageY;
startX = touch.pageX;
}
},
onTouchMove: function(swiper){ //手动滑动中触发
if($(event.target).is('button')){
return false;
}else{
var touch = event.touches[0];
endX = touch.pageX-startX;
endY = touch.pageY-startY;
if(endY>0){
$(".init-loading").html('下拉刷新.....').show();
}
}
},
onTouchEnd: function(swiper) {
if($(event.target).is('button')){
return false;
}else{
$(".init-loading").hide();
}
}
html5提供的防止冒泡机制方法有:
event.preventDefault();阻止元素发生默认的行为(比如点击提交按钮时阻止对表单的提交)
event.stopPropagation();阻止事件冒泡都父元素,组织任何父事件处理程序被执行;