zoukankan      html  css  js  c++  java
  • 移动端阻止事件冒泡需要注意!

    移动端使用的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)" />';
    }
  • 相关阅读:
    23种设计模式中的模板模式
    23种设计模式中的外观模式
    div,li,span自适应宽度换行问题
    监听自定义ItemRender的事件
    flex acionscript png图片去除多余空白,生成合适大小图片
    项目中用到RouteTable,发布到IIS7中无法访问
    记录Castle ActiveRecord访问Sqlite的配置
    如何卸载软件
    linux 下route命令
    linux 下 ifcfg-eth0 配置 以及ifconfig、ifup、ifdown区别
  • 原文地址:https://www.cnblogs.com/yuqingfamily/p/8053330.html
Copyright © 2011-2022 走看看