event.preventDefault vs event.stopPropagation

Question

有人可以解释event.preventDefault()和之间的区别是event.stopPropagation()什么？

我有一张桌子,在那张桌子里我有一个img标签.

当我点击img标签时,我想看一个弹出窗口.

但我也想停止选择多行,所以我使用:

$("table.items tbody tr").click(function(event) {
        event.stopPropagation();
    });

当我使用js代码时,弹出窗口不会出现;

如果我删除了js代码,弹出窗口就可以了.

$(".info").live("click",function(e){
    //console.log('ok');
    e.stopPropagation();
    var elem = $(this);
    var id = $(this).attr("id").replace("image_","container_");
    $('#'+id).toggle(100, function() {
        if($(this).css('display') == 'block') {
            $.ajax({
                url: "$url",
                data: { document_id:elem.attr('document_id') },
                success: function (data) {
                    $('#'+id).html(data);
                }
            });
            }
        });
});

为什么？

Answer 1

我不是Javascript专家,但据我所知:

stopPropagation用于确保事件不会使链条冒泡.例如.单击<td>标记也会触发其父级的点击事件<tr>,然后其父级<table>等会stopPropagation阻止这种情况发生.

preventDefault用于停止元素的正常动作,例如.preventDefault在链接上的单击处理程序中将停止跟踪链接,或者在提交按钮上将停止提交的表单.

Answer 2

• stopPropagation在一个孩子身上将阻止该事件发生在 父母(整个祖先)身上
• preventDefault对一个孩子来说会停止对孩子的事件,但它会发生在它的父母身上(和祖先一样!)

现在你的代码是父母？哪个孩子？img孩子tr是父母(老实说,祖父母),所以猜猜stopPropagation代码应该在哪里.

Answer 3

来自W3C的活动preventDefault:

event.preventDefault()方法停止发生元素的默认操作.例如:

阻止提交按钮提交表单阻止链接跟随URL

stopPropagation来自W3C的活动:

event.stopPropagation()方法停止将事件冒泡到父元素,从而阻止执行任何父事件处理程序.