javascript - e.stopPropagation();阻止事件冒泡的方法不起作用了，烦大侠看一下是怎么回事？
本文介绍了javascript - e.stopPropagation();阻止事件冒泡的方法不起作用了，烦大侠看一下是怎么回事？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
这个列表有两个点击事件，点击列表，会跳转到一个详情页面；点击列表中的图片，会弹出一个图片的预览，但是不再跳转。
现在的情况是，图片预览这个点击事件不起作用了。一点图片就跳转。怎么解决这个问题？
点击事件都被触发，就是预览图片时有问题
//点击cell
$('.js_container').on('click','.doctor-problem-list',function(){
var item = $(this).attr('data-item');
if(item) item = JSON.parse(item);
var dialogId = item.dialogId;
var dialogState = item.dialogState;
//判断跳转位置
if(dialogState == '0') {
window.location.href = 'doctor_ask_problem.html?dialogId=' + dialogId;
} else if(dialogState == '1') {
window.location.href = 'doctor_problem_stay_evaluate.html?dialogId=' + dialogId;
} else if(dialogState == '2') {
window.location.href = 'doctor_problem_has_end.html?dialogId=' + dialogId;
} else if(dialogState == '3') {
window.location.href = 'doctor_problem_already_evaluate.html?dialogId=' + dialogId;
} else if(dialogState == '5') {
window.location.href = 'doctor_problem_stay_evaluate.html?dialogId=' + dialogId;
}
})
//点击图片
$('.js_container').on('click','.weui-jiaj-doctor-img',function(e){
e.stopPropagation();
var item = $(this).attr('data-img');
if(item) item = JSON.parse(item);
var imgUrl = item.imgUrl;
weui.gallery(p_img);
$('.weui-gallery__del').remove();
$('.weui-gallery span').html('');
})下面是解析出来的HTML结构：
<div class="weui-cell_access doctor-problem-list panel-2" data-id="problemList" data-item="{"dialogId":"35b9b3521f5045c191b375d8b13b6856","dialogState":0}">
<div class="weui-jiaj-panel">
<div class="weui-jiaj-cell" style="border-bottom: 1px solid #e5e5e5;">
<ul class="weui-media-box__info" style="margin-top: 0;">
<li class="weui-media-box__info__meta">
<img src="../img/user/patient-header.png" class="weui-media-box__img user-header">
</li>
<li class="weui-media-box__info__meta user-name"></li>
<li class="weui-media-box__info__meta weui-media-box__info__meta_extra user-age">23岁</li>
<li class="weui-media-box__info__meta weui-media-box__info__meta_extra">
<img src="../img/doctor/man-icon.png" class="weui-media-box__img usr-sex">
</li>
</ul>
<ul class="weui-media-box__info continue-ask" style="margin-top: 0;">
<li class="weui-media-box__info__meta user-problem">
<span>还剩</span>
<span class="user-problem-time">47</span>
<span>小时</span>
</li>
</ul>
</div>
<div class="weui-media-box weui-media-box_text">
<p class="weui-jiaj-problem__desc user-des">4444444444444444444444</p>
<!--问题图片-->
<div class="weui-jiaj-question-img-list problem-img"><img class="weui-jiaj-doctor-img img-20" src="http://7xtfon.com1.z0.glb.clouddn.com/E2B47DFB-BA3E-42A4-80F8-1A32F175BAD6?imageslim&e=1486371709&token=Ah0MrGmdD0mrtScDjidLFu9DP4s9PirBdQ6SUTzS:Rr0tSyY919APZkJjEewC5A9auAY=&imageMogr2/gravity/Center/crop/300x300" data-img="{"thumbnailUrl":"http://7xtfon.com1.z0.glb.clouddn.com/00C1D5AF-3369-4482-BB3C-E47073420CC0?imageslim&e=1486371709&token=Ah0MrGmdD0mrtScDjidLFu9DP4s9PirBdQ6SUTzS:4_kWR1agSrDa_KcZuhcenhILX8I=&imageMogr2/gravity/Center/crop/300x300","imgUrl":"http://7xtfon.com1.z0.glb.clouddn.com/00C1D5AF-3369-4482-BB3C-E47073420CC0?imageslim&e=1486371709&token=Ah0MrGmdD0mrtScDjidLFu9DP4s9PirBdQ6SUTzS:4_kWR1agSrDa_KcZuhcenhILX8I="}"><img class="weui-jiaj-doctor-img img-21" src="http://7xtfon.com1.z0.glb.clouddn.com/4FA02EA5-F936-409B-8ADD-552415317151?imageslim&e=1486371709&token=Ah0MrGmdD0mrtScDjidLFu9DP4s9PirBdQ6SUTzS:rOBCxOAf9DSn-8tXqbglvNfTW60=&imageMogr2/gravity/Center/crop/300x300" data-img="{"thumbnailUrl":"http://7xtfon.com1.z0.glb.clouddn.com/00C1D5AF-3369-4482-BB3C-E47073420CC0?imageslim&e=1486371709&token=Ah0MrGmdD0mrtScDjidLFu9DP4s9PirBdQ6SUTzS:4_kWR1agSrDa_KcZuhcenhILX8I=&imageMogr2/gravity/Center/crop/300x300","imgUrl":"http://7xtfon.com1.z0.glb.clouddn.com/00C1D5AF-3369-4482-BB3C-E47073420CC0?imageslim&e=1486371709&token=Ah0MrGmdD0mrtScDjidLFu9DP4s9PirBdQ6SUTzS:4_kWR1agSrDa_KcZuhcenhILX8I="}"><img class="weui-jiaj-doctor-img img-22" src="http://7xtfon.com1.z0.glb.clouddn.com/00C1D5AF-3369-4482-BB3C-E47073420CC0?imageslim&e=1486371709&token=Ah0MrGmdD0mrtScDjidLFu9DP4s9PirBdQ6SUTzS:4_kWR1agSrDa_KcZuhcenhILX8I=&imageMogr2/gravity/Center/crop/300x300"></div>
</div>
</div>
</div>
解决方案
使用了个笨办法，在循环所有图片时，给每个图片添加一个:
imgContainer.addClass('img-' + i + a);把要预览的图片地址，做为自定义属性添加到这个img上:
$('.img-' + i + a).attr('img-src',p_img);在点击这个图片时，把这个自定义属性的src地址取出来：
var img_src = this.getAttribute('img-src');全部代码：
//问题图片
for(var a = 0 ; a < user_p_img.length; a++){
var imgContainer = imgDom.clone();
var p_thumbnail = user_p_img[a].thumbnailUrl;
var p_img = user_p_img[a].imgUrl;
console.log('每一张图片地址是多少：' + p_img);
imgContainer.addClass('img-' + i + a);
if(p_thumbnail != null){
imgContainer.attr('src',p_thumbnail);
}
//添加到图片容器
panel.find('.problem-img').append(imgContainer);
//给当前的img添加自定义属性 img-src，并给这个属性赋值为这个图片的原始地址
$('.img-' + i + a).attr('img-src',p_img);
//点击图片预览
$('.img-' + i + a).on('click',function(e){
e.stopPropagation();
//this.getAttribute 从当前dom节 点中取出它的属性，这个属性就是当前图片的url地址
var img_src = this.getAttribute('img-src');
//预览这个图片
weui.gallery(img_src);
$('.weui-gallery__del').remove();
//去掉span中的字符串
$('.weui-gallery span').html('');
})
}//以上方法虽然有效，但是如果更改了DOM节点，或是HTML结构变更，这个方法就不起作用了。下面是我更改之后的方法。
/给每个图片添加自定义属性，把要预览的图片地址绑定在这个图片上/
temp_img.find('.doctor-problem-img').attr('imgURL', JSON.stringify(imgs[j]));/点击这个图片的class .doctor-problem-img，通过给这个事件绑定阻止事件捕获方法e.stopImmediatePropagation();，很好的控制事件冒泡，有效阻止另一个点击事件的触发/
//问题图片预览
$('.js_container').on('click','.doctor-problem-img',function(e){
e.stopImmediatePropagation();
var item = $(this).attr('imgURL');
if(item) item = JSON.parse(item);
var imgUrl = item.imgUrl;
weui.gallery(imgUrl);
$('.weui-gallery__del').remove();
$('.weui-gallery span').html('');
})这篇关于javascript - e.stopPropagation();阻止事件冒泡的方法不起作用了，烦大侠看一下是怎么回事？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
