javascript - e.stopPropagation();阻止事件冒泡的方法不起作用了，烦大侠看一下是怎么回事？

Question

这个列表有两个点击事件，点击列表，会跳转到一个详情页面；点击列表中的图片，会弹出一个图片的预览，但是不再跳转。
现在的情况是，图片预览这个点击事件不起作用了。一点图片就跳转。怎么解决这个问题？
点击事件都被触发，就是预览图片时有问题

ringa_lee · Answer

使用了个笨办法，在循环所有图片时，给每个图片添加一个:

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('');
})

PHP中文网 · Answer

你使用了代理的方式来绑定时间！

两个事件回调函数都绑在了 .js_container 元素上，在鼠标点击 .weui-jiaj-doctor-img 的时候，因为没有直接在这个元素上绑定事件回调函数，所以会冒泡到 .js_container ， .js_container 在此处绑定了两个 click 回调函数，jQuery 并不保证两个回调函数的执行先后顺序，但是这个顺序并不重要，因为无论什么顺序都会执行第一个回调函数，然后跳转。

天蓬老师 · Answer

http://runjs.cn/code/pfvyt819
点击图片没跳转啊

PHP中文网 · Answer

你虽然阻止了事件冒泡但是没有阻止事件捕获，图片的点击事件应该加上event.stopImmediatePropagation();

怪我咯 · Answer

addEventListener来做吧，通过判断e的target来做出相应的操作。

javascript - e.stopPropagation();阻止事件冒泡的方法不起作用了，烦大侠看一下是怎么回事？

全部回覆(5)我來回復