如何防止iscroll滚动时,避免触发tap事件
1个回答
推荐于2016-05-30
展开全部
设置可滚动
new iScroll("picFlip2",{"onScrollMove":function(){},"onScrollEnd":function(){return false;}});
菜单项的单击事件
// tap 首页中的模块 按tap
$('.myone,.myone_2').live('tap',function(event){
var xb = $(this).parent().children('input').eq(0).val();
openModuleWin(xb);
});
但是如果用户的实际意图是要滚动这个页面,只是不小心按在了这个按钮上,此时按钮的touchend依然会触发,你的代码逻辑依然会被执行,但是实际上这并不是用户预期的行为。在原生UI组件中,例如UIButton本身就带有TouchUpInside的事件,也就是说,如果你的手指按下和抬起的时候都处于这个元素的范围,才认为你是在点击这个按钮。
遗憾的是,在JavaScript并没有提供DOM元素的类似TouchUpInside事件,我们只能通过一点小小的处理来尽量去识别用户是否想点击这个按钮:
问题:为什么不在touchend事件中直接判断手指离开时的位置和手指按下时的位置的差值?因为touchend事件和touchcancel事件中,传入到事件绑定函数的参数touchEvent对象并不包含手指位置的信息。所以只能在touchmove中跟踪手指位置。
在touchstart事件中,记录用户点击的位置,使用clientX和clientY坐标对儿
在touchmove事件中,计算当前手指的位置和开始点击的位置的差值的绝对值是否超过了一个设定的值,如果超过了设定值,则认为用户不想按这个钮了,或者用户并不是真的想按这个钮。给这个DOM元素设置一个标志位data-moved="y"。data-开头的是自定义属性,这个是HTML5规范中建议的
在touchend事件中,检测这个DOM元素的data-moved属性是否为y,如果为y则不去执行既定的业务逻辑,而只是恢复按钮的样式为未点击的状态
new iScroll("picFlip2",{"onScrollMove":function(){},"onScrollEnd":function(){return false;}});
菜单项的单击事件
// tap 首页中的模块 按tap
$('.myone,.myone_2').live('tap',function(event){
var xb = $(this).parent().children('input').eq(0).val();
openModuleWin(xb);
});
但是如果用户的实际意图是要滚动这个页面,只是不小心按在了这个按钮上,此时按钮的touchend依然会触发,你的代码逻辑依然会被执行,但是实际上这并不是用户预期的行为。在原生UI组件中,例如UIButton本身就带有TouchUpInside的事件,也就是说,如果你的手指按下和抬起的时候都处于这个元素的范围,才认为你是在点击这个按钮。
遗憾的是,在JavaScript并没有提供DOM元素的类似TouchUpInside事件,我们只能通过一点小小的处理来尽量去识别用户是否想点击这个按钮:
问题:为什么不在touchend事件中直接判断手指离开时的位置和手指按下时的位置的差值?因为touchend事件和touchcancel事件中,传入到事件绑定函数的参数touchEvent对象并不包含手指位置的信息。所以只能在touchmove中跟踪手指位置。
在touchstart事件中,记录用户点击的位置,使用clientX和clientY坐标对儿
在touchmove事件中,计算当前手指的位置和开始点击的位置的差值的绝对值是否超过了一个设定的值,如果超过了设定值,则认为用户不想按这个钮了,或者用户并不是真的想按这个钮。给这个DOM元素设置一个标志位data-moved="y"。data-开头的是自定义属性,这个是HTML5规范中建议的
在touchend事件中,检测这个DOM元素的data-moved属性是否为y,如果为y则不去执行既定的业务逻辑,而只是恢复按钮的样式为未点击的状态
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询