android 防止点击事件冒泡,移动端阻止事件冒泡需要注意!

本文讲述了在移动端使用zepto库和自定义onclick事件时,如何解决大区域点击事件与小区域内事件冲突的问题。通过将大区域的点击事件从tap改为click,确保了事件冒泡被正确阻止,使得各个区域的点击行为得以独立执行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

c28994d8dbc283e896a0451af2d39723.png

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

//点击某一篇文章,进入正文页面

$('.articleCont').on('click',function () {

window.location.href = 'hcArticle.html?userId='+userId+'&tieziId='+DES3.encrypt(key,$(this).data('postnoteid'))+'&userName='+userName;

});

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

//调用android打电话方法

functionandroidPhone(_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+='hcPhone2.png';

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值