16

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

为什么？

4

3 回答 3

39

我不是 Javascript 专家，但据我所知：

stopPropagation用于确保事件不会在链中冒泡。例如。点击<td>标签也会触发它的 parent 上的点击事件<tr>，然后它的 parent<table>等会stopPropagation阻止这种情况发生。

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

于 2013-08-09T13:03:27.143 回答
8
  • stopPropagation在孩子身上将阻止该事件发生在 父母身上（整个祖先）
  • preventDefault在孩子身上会停止在孩子身上发生的事件，但它会发生在它的父母身上（还有祖先！）

现在在您的代码中哪个是父级？哪个是孩子？img是孩子tr是父母（老实说是祖父母），所以猜猜stopPropagation代码应该在哪里。

于 2013-08-09T13:11:42.503 回答
7

来自 W3C 的事件：preventDefault

event.preventDefault() 方法阻止元素的默认操作发生。例如：

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

stopPropagation来自 W3C 的事件：

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

于 2013-08-09T13:09:33.657 回答