如何在拖动子节点时阻止父节点击事件

Question

以下是示例代码：

$('.bmc-div').click(function(e){
    e.stopPropagation();
    // console.log(e.target);
    if ($(e.target).hasClass('my-sticky')) {

    } else {
        canvas.add_sticky($(this));
    }
});

$('.bmc-div .sticky_container').sortable({
    cursor: 'move',
    revert: true,  
    helper: 'clone',
    // handle: ".element-handler",
    connectWith: '.bmc-div .sticky_container',
    scroll: true,
    cancel: null,
    opacity: 0.7,
    // axis: 'y',
    items: ".my-sticky",
    placeholder : "sticky-placeholder",
    containment: "#main",
    zIndex: 9999,
    start: function(event, ui) {
        event.stopPropagation();
    },
    stop: function(event, ui) {
        event.stopPropagation();
    },
    update: function(event, ui) {
        // update_sortable_position();
    }
}).disableSelection();

以下是问题的HTML代码：

 <div id="bmc-rs" class="col-sm-12 bmc-div">
        <div class='bmc-row'>
             <p style='margin: 0px;'><span class="grid-label">Revenue Streams              </span><span class="pull-right"><i class="fa fa-briefcase"></i></span></p>
              </div>
              <div class="sticky_container">
                <div class="my-sticky" style="display: block;">Sample Sticky</div>
              </div>
            </div>

问题是子元素将被拖动但是当停止时，它仍然会触发父容器的click事件。

Answer 1

您需要停止draggable元素mousedown事件的传播：

$('.sticky_container').mousedown(function (event) {
    event.stopPropagation();
});