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

活动preventDefault From W3C:

event.preventDefault（）方法停止an的默认操作   发生的因素。   例如：

阻止提交按钮提交表单阻止链接   关注网址

活动stopPropagation From W3C：

event.stopPropagation（）方法停止将事件冒泡到父元素，阻止任何父事件处理程序执行。

event.preventDefault vs event.stopPropagation

3 个答案: