Zepto.js阻止事件冒泡
程序员文章站
2022-05-03 18:04:36
...
问题描述:
//1. 层级关系
//.jd_case -> .ico_code || .ico_computer
$(document).on('click', '.ico_code', function(e){
console.log('ico_code-------');
});
$(document).on('click', '.ico_computer', function(e){
console.log('ico_computer-------');
});
$(document).on('tap', '.jd_case', function(e){
console.log('jd_case--------');
});
//2. 处理 ico_code 和 ico_computer 的点击事件继续往上冒泡
//----发现 return false 和 e.stopPropagation() 并没有起效果
$(document).on('click', '.ico_code', function(e){
console.log('ico_code-------');
//return false;
e.stopPropagation();
});
$(document).on('click', '.ico_computer', function(e){
console.log('ico_computer-------');
//return false;
e.stopPropagation();
});
$(document).on('tap', '.jd_case', function(e){
console.log('jd_case--------');
});
原因:
//
//看到一篇文章说 可能是zepto的轻量的原因
//
//
解决:
$(document).on('click', '.ico_code', function(e){
console.log('ico_code-------');
});
$(document).on('click', '.ico_computer', function(e){
console.log('ico_computer-------');
});
$(document).on('tap', '.jd_case', function(e){
//判断来源
if ($(e.target).hasClass('ico_computer') || $(e.target).hasClass('ico_code')) {
return;
}
console.log('jd_case--------');
});
上一篇: element表单表头 放图标的方法
下一篇: Zepto.js touch模块深入分析