msforest / notebook

好记性不如烂笔头,记录知识的点点滴滴。
https://github.com/msforest/notebook/wiki
0 stars 0 forks source link

移动端使用iscroll插件button触发两次 #3

Open msforest opened 7 years ago

msforest commented 7 years ago

工作中使用angularjs为移动端编写页面,在页面中使用button+click方法进行事件响应,如

<button ng-click='method(arg0,arg1)'>点击</button>

使用手机进行点击时会引发两次事件响应,原因不明,不知道问题出在哪里,或许是button一次,click一次,然而并不是这样。google搜了一下,有说是点透原因,也有说是冒泡导致,然后一个个进行测试。点透原因使用fastclick库,用法:导入fastclick.js,然后初始化fastclick:

$(function(){
    FastClick.attach(document.body);
});

就这样试了一下,问题并没有好转,还是和之前一样,点击一次引发两次事件。第一个失败,第二个继续,阻止事件冒泡:

<button ng-click='method(arg0,arg1,$event)'>点击</button>

method = function(arg0,arg1,$event){
    $event.stopPropagation();
    //$event.preventDefault();
}

没有效果,也不是冒泡引起的。由于我不是很懂js和html,网上搜的方法都不适合,只能不断尝试,换个a标签试试:

<a ng-click='method(arg0,arg1)'>点击</a>

这时,那问题不见了,点击一次请求一次。虽然问题没有了,但是不知道这错误原因,有知道的还请告知,先谢谢了。对了,angular-touch.js也试过了,没有用,所以这肯定不是冒泡导致的。

2017-07-01 因为使用到iscroll开源插件,经过源码分析得知:options对象有一个preventDefaultException属性,对button/input/textarea/select进行了过滤,使得preventDefault()方法跳过,根据名称猜测preventDefaultException属性好像是过滤异常用的,不知道什么目的。 这个可以参考一下