如何在拖动父级子级时防止父级的单击事件

问题描述

这是示例代码:

$('.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代码:

Here is the HTML Code for the question:

 <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事件.

The problem is that the child element will be dragged but when stopped, it will still trigger the click event of the parent container.

推荐答案

您需要在draggable元素的mousedown事件上停止传播:

You need to stop propagation on your draggable element's mousedown event:

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

这篇关于如何在拖动父级子级时防止父级的单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！