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

標籤：opp   highlight   lis   stop   log   index   text   message   script   

移動端使用的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)" />‘;}

 

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