Question

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

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

然而我不能做的就是“接触”一个孩子。例如，双击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'
        })
    }

})
}

Answer 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 docs

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

拖着儿童和儿童放弃父母，仍然访问孩子

1 个答案: