用的是zepto.js
一个页面分三个tab, 通过隐藏,显示div来展示不同的数据。
A tab页面:已开通基金列表数据, 当没有数据时,会显示一个跳转到B tab页面的a标签
B tab页面: 未开通的基金列表数据,可以点击列表以选中/取消 基金
点击A tab页中的a元素 触发该元素的touchend事件, 跳转到B tab页面。 B tab页面中是基金列表, 可以选中或取消!
解决方式一: a元素的touchend事件中, 给B tab中的基金列表添加禁止鼠标事件, 过一定时间后在恢复鼠标事件。 公司框架的使用方式:
$.bindEvent($("a"), function(){
$(_pageId+"#unopen").click(); // 隐藏A tab页的内容, 显示B tab页的内容
//防止点击穿透, 过后需要将元素回复可点击
$(_pageId+"#unopenList").css('pointer-events','none');
setTimeout(function(){$(_pageId+"#unopenList").css('pointer-events','all')},500)
}, "touchend");
解决方式二:
第一种方式, 第一次进入这个页面是有效的,测试时发现,退出重新进入这个页面 可能还是会发生点透事件, 后来修改为以下方式(我也不知道这种方式的原因)
$.bindEvent($("a"), function(){
setTimeout(function(){$(_pageId+"#unopen").click();},350); //延时一段时间在切换显示内容, 延时时间要大于300。 300ms移动端click延迟时间
}, "touchend");