移动端阻止事件冒泡需要注意！

Posted 2020-10-18 晴晴加油

移动端使用的js插件式zepto和touch，想要在一个大的区域做一个点击事件，但是里面小的区域也有自己的点击事件，就要阻止事件冒泡，但是使用了之后发现不好使，原因是：大的区域使用的事件是移动端的tap事件，小的区域是js动态生成的元素，使用的是onclick加载的函数，所以，阻止冒泡事件失败了，最后，把大的点击区域也换成了click进行处理，就好使了！zepto也是支持jquery的click事件的。

 

//大的点击区域，点击要跳转到另一个页面

//点击某一篇文章，进入正文页面
$(‘.articleCont‘).on(‘click‘,function () {
　　window.location.href = ‘hcArticle.html?userId=‘+userId+‘&tieziId=‘+DES3.encrypt(key,$(this).data(‘postnoteid‘))+‘&userName=‘+userName;
});

 

//小的点击区域的方法，阻止了事件的冒泡，使之有自己的自己的点击事件。

//调用android打电话方法
function androidPhone(_this,e){
    if(DES3.decrypt(key,userId)==‘0‘||DES3.decrypt(key,userId)==0){  //未登录点赞
        //alert(‘未登录‘)
        if(u.indexOf(‘Android‘) > -1) {  //跳转android登录页面
            window.Android.native_method_select_login();
        } else if(u.indexOf(‘iPhone‘) > -1) {
            window.webkit.messageHandlers.native_method_select_login.postMessage({body: ‘sender message‘});
        }
    } else {
        if(u.indexOf(‘Android‘)>-1){  //android的打电话弹框是android写的
            window.Android.native_method_select_call_phone($(_this).data(‘name‘), $(_this).data(‘tel‘).toString());
        } else if(u.indexOf(‘iPhone‘)>-1){
            $(‘.callDialog‘).css({‘display‘:‘block‘,‘opacity‘:‘1‘});
            console.log($(‘.callDialog‘).height());
            $(‘.callDialog .name‘).text($(_this).data(‘name‘));
            $(‘.callDialog .call‘).attr(‘href‘,‘tel:‘+$(_this).data(‘tel‘));
            $(‘.grayMask‘).show();  //遮罩层
            $(‘.callDialog‘).css({
                ‘top‘: ($(window).height() - $(‘.callDialog‘).height()) / 2 + $(window).scrollTop() + ‘px‘,
                ‘left‘: ($(window).width()-$(‘.callDialog‘).width())/2+‘px‘
            });
        }
    }
    e.stopPropagation();
}

//小的点击区域，调用上面定义的阻止事件冒泡的方法！

if(list[i].isPhone==0){ //是否开启电话，0：开启；1：关闭
    hcListStr+=‘<img src="../pic/hcPhone2.png" data-tel="‘+list[i].phone+‘" onclick="androidPhone(this,event)" />‘;
}