监听用户的touchmove操作,导致input等不能输入内容,点击事件不能执行
移动端页面使用touchmove等手势滑动切换页面而导致input,botton表单提交,点击事件不能执行,使用 http://www.cnblogs.com/duanhuajian/archive/2012/11/09/2763159.html 该网站里面提供的方法也没有解决,不知道那位大神有方法
代码如下:
$(function(){
var imgdefereds=[];
$('.app-content7').find('img').each(function(){
var dfd=$.Deferred();
$(this).bind('load',function(){
dfd.resolve();
}).bind('error',function(){
//图片加载错误,加入错误处理
// dfd.resolve();
setTimeout(function(){
$('#loading').fadeOut();
new slider_init();
},5000);
})
if(this.complete) setTimeout(function(){
dfd.resolve();
},1000);
imgdefereds.push(dfd);
})
$.when.apply(null,imgdefereds).done(function(){
//callback(); // 全部图片加载完成触发的回调函数
setTimeout(function(){
$('#loading').fadeOut();
new slider_init();
},2000);
});
})
function slider_init(){//init
this.page = $('.page');
this.Content = $('.app-content');
this.z = 10;
this.DY,this.MY,this.UY;
this.mark = true;
this.h = this.Content.innerHeight();
var _this = this;
this.page.on('touchstart',function(e){
if(!_this.mark)return;
_this.mark = false;
_this.start(e,$(this));
return false;
});
this.page.on('mousedown',function(e){
if(!_this.mark)return;
_this.mark = false;
_this.start(e,$(this));
return false;
});
}
slider_init.prototype.start = function(e,obj){//鼠标按下
this.page.css({
"-webkit-transition":"none",
"-webkit-transform":"none"
});
var ev =event || e;
if(ev.targetTouches){
var touch = ev.targetTouches[0];
this.DY = touch.pageY;
}else{
this.DY = ev.clientY;
}
this.next = 0;
this.prev = 0;
this.index = obj.index();
this.z++;
this.a = this.h / this.h;
this.c = this.h / 10;
var _this = this;
this.page.on('touchmove',function(e){
_this.move(e);
});
this.page.on('touchend',function(e){
_this.end(e);
});
this.page.on('mousemove',function(e){
_this.move(e);
});
this.page.on('mouseup',function(e){
_this.end(e);
});
}
slider_init.prototype.move = function(e){//鼠标移动
var ev =event || e;
if(ev.targetTouches){
var touch = ev.targetTouches[0];
if(touch.pageY - this.DY == 0)return;
this.MY= touch.pageY;
var Y = touch.pageY;
}else{
if(ev.clientY - this.DY == 0)return;
this.MY= ev.clientY;
var Y = ev.clientY;
}
this.MY= (this.MY-this.DY);
if(Y < this.DY){
this.prev = this.index;
this.next = this.index + 1;
if(this.next > this.page.length - 1){
this.next = 0;
}
this.page.eq(this.prev).css('-webkit-transform-origin','50% 0')
this.page.eq(this.next).removeClass('active2');
if(!this.page.eq(this.next).hasClass('active')){
this.page.eq(this.next).addClass('active');
}
this.MY = this.h + this.MY;
}else{
this.next = this.index - 1;
this.prev = this.index;
if(this.next == -1){
this.next = this.page.length - 1;
}
this.page.eq(this.prev).css('-webkit-transform-origin','50% bottom');
this.page.eq(this.next).removeClass('active');
if(!this.page.eq(this.next).hasClass('active2')){
this.page.eq(this.next).addClass('active2');
}
this.MY = -this.h + this.MY;
}
next_page = this.page.eq(this.next);
prev_page = this.page.eq(this.prev);
this.b = Math.abs(this.MY) / this.a;
this.d = (this.b / this.h) > 1 ? 1 : (this.b / this.h) < 0 ? 0.1 : (this.b / this.h);
prev_page.css({
'-webkit-transform':'scale('+this.d+')',
"opacity":this.d
});
next_page.css({
'top':this.MY+"px",
'zIndex':this.z
});
return false;
}
slider_init.prototype.end = function(e){//鼠标松开
var ev =event || e;
if(ev.changedTouches){
var touch = ev.changedTouches[0];
this.UY = touch.pageY;
}else{
this.UY = ev.clientY;
}
this.page.unbind('mousemove');
this.page.unbind('mouseup');
this.page.unbind('touchmove');
this.page.unbind('touchend');
var _this = this;
if(this.UY - this.DY == 0){
this.mark = true;
return;
}
if(Math.abs(this.UY - this.DY) < 50){
if(this.UY > this.DY){
var t = -100;
}else{
var t = 100;
}
this.page.eq(this.next).removeClass('active').removeClass('active2').css({
'top':t+'%',
"-webkit-transition":"top cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.4s",
'display':'block'
});
this.page.eq(this.prev).css({"-webkit-transform":'scale(1)',"-webkit-transition":"-webkit-transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940)"});
_this.mark = true;
return;
}
var _this = this;
this.page.eq(this.next).stop().animate({textIndex:0+'%'},{
step:function(i){
var t = Math.abs(_this.page.eq(_this.next).position().top);
var kg = Math.abs(t) / _this.a;
var scal = (kg / _this.h) > 1 ? 1 : (kg / _this.h) < 0 ? 0.1 : (kg / _this.h);
_this.page.eq(_this.prev).css({"-webkit-transform":"scale("+scal+")","opacity":scal});
}
});
this.page.eq(this.next).addClass('current').css({'top':"0",'zIndex':this.z,"-webkit-transition":"top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940)"});
setTimeout(function(){
_this.page.eq(_this.prev).removeClass('current').css({'top':"100%",'-webkit-transform':'none',"opacity":1});
_this.page.eq(_this.next).removeClass('active').removeClass('active2');
_this.mark = true;
},600);
}
jquery-mobile jquery html5 JavaScript
_Zfw_
10 years ago