
这个列表有两个点击事件,点击列表,会跳转到一个详情页面;点击列表中的图片,会弹出一个图片的预览,但是不再跳转。
现在的情况是,图片预览这个点击事件不起作用了。一点图片就跳转。怎么解决这个问题?
点击事件都被触发,就是预览图片时有问题
//点击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结构:
4444444444444444444444



Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
使用了个笨办法,在循环所有图片时,给每个图片添加一个:
把要预览的图片地址,做为自定义属性添加到这个img上:
在点击这个图片时,把这个自定义属性的src地址取出来:
全部代码:
//以上方法虽然有效,但是如果更改了DOM节点,或是HTML结构变更,这个方法就不起作用了。下面是我更改之后的方法。
/给每个图片添加自定义属性,把要预览的图片地址绑定在这个图片上/
/点击这个图片的class .doctor-problem-img,通过给这个事件绑定“阻止事件捕获方法e.stopImmediatePropagation();”,很好的控制事件冒泡,有效阻止另一个点击事件的触发/
你使用了代理的方式来绑定时间!
两个事件回调函数都绑在了 .js_container 元素上,在鼠标点击 .weui-jiaj-doctor-img 的时候,因为没有直接在这个元素上绑定事件回调函数,所以会冒泡到 .js_container , .js_container 在此处绑定了两个 click 回调函数,jQuery 并不保证两个回调函数的执行先后顺序,但是这个顺序并不重要,因为无论什么顺序都会执行第一个回调函数,然后跳转。
http://runjs.cn/code/pfvyt819
点击图片没跳转啊
你虽然阻止了事件冒泡但是没有阻止事件捕获,图片的点击事件应该加上event.stopImmediatePropagation();
addEventListener来做吧,通过判断e的target来做出相应的操作。