0

我正在尝试列出可以拖放的项目列表。

我成功地将一个元素放入其父元素，并将一个子元素放入其新移动的元素。

但是我不能做的是“访问”一个孩子。例如，双击 li 元素应该会打开一个带有该元素名称的框。我不能，它总是触发事件的父母。

我试过玩 zIndex 但它没有解决方案。

看我的小提琴它会更明确。 http://jsfiddle.net/WeeHT/

谢谢你！

function make_draggable() {
$('.account_line').draggable({
    containment: '#COA_Table',
    cursor: 'move',
    snap: '#COA_Table',
    helper: 'clone'
})
}

function make_droppable() {
$('.account_line').droppable({
    accept: '.account_line',
    tolerance: 'pointer',
    hoverClass: "account_line_drop-hover",
    zIndex: zindexlevel++,
    drop: function (e, ui) {
        // if this is first child we append a new ul
        if ($(this).children('ul').length == 0) {
            $(this).append('<ul></ul>')
        }

        $(this).children('ul').append(ui.draggable)
        $(this).css({
            backgroundColor: 'white'
        })
        $(this).css({
            zIndex: zindexlevel++
        })
    },
    over: function () {
        $(this).css({
            backgroundColor: "grey"
        });
    },
    out: function () {
        $(this).css({
            backgroundColor: 'white'
        })
    }

})
}
4

1 回答 1

1

这是因为事件正在冒泡到 DOM 树。

因此，您必须在双击事件处理程序的开头添加下一行：

e.stopPropagation();

然后它在您的代码中将如下所示：

function start_edit() {
    $('.account_line').dblclick(function (e) {
        e.stopPropagation();
        var account_name = $(this).children('p').first().html()
        $('#account_edit').css({
            display: 'block'
        });
        $('#account_edit').children('#account_name_to_edit').html(account_name);
    })
}

jQuery 文档

描述：防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。

于 2013-07-13T20:25:54.547 回答