防止jquery在父触发子事件时可拖动答案

【问题标题】：Prevent jquery draggable on parent firing child event防止jquery在父触发子事件时可拖动
【发布时间】：2012-08-03 19:03:10
【问题描述】：

我将 jquery draggable 附加到一个 DIV 容器，它的每个子元素都有一个单击事件，当我拖动主父容器时如何防止子事件触发。

我只想在单击时触发子事件，而不是在拖动整个事件时触发。

我做了一个演示：http://jsfiddle.net/sygad/RgdPq/1/

任何帮助表示赞赏。

【问题讨论】：

标签： jquery draggable

【解决方案1】：

您可以使用临时变量来跟踪拖动状态，然后像这样 jsFiddle example 将 click 事件更改为 mouseup 事件。

jQuery

var bodyWidth = $(window).width();
var bodyHeight = $(window).height();
var dragging = false;
$("#container").draggable({
    containment: "window",
    start: function() {
        dragging = true;
        $(this).addClass('dragged')
    },
    stop: function() {
        dragging = false;
        $(this).removeClass('dragged')
    }
});

$('.box').mouseup(function() {
    if (!dragging) {
        //If there is already a new box present, remove it
        if ($('.newBox').length) {
            $('.newBox').remove();
        }

        //Get the offset of THIS box we just clicked
        var thisOffset = getOffset(this)

        //Get its left & top value
        var newBoxLeft = thisOffset.left;
        var newBoxTop = thisOffset.top;

        //Full size box will be 75% width & height of viewport
        var newBoxFinalWidth = bodyWidth * 0.75;
        var newBoxFinalHeight = bodyHeight * 0.75;

        //Full size box will be positioned center/center on the screen
        var newBoxDestLeft = (bodyWidth - newBoxFinalWidth) / 2;
        var newBoxDestTop = (bodyHeight - newBoxFinalHeight) / 2;

        //Create our new box
        var newBox = '<div class="newBox clickOut"></div>'

        //Add it to the DOM
        $('body').append(newBox);

        //Position it to overlay the box we just clicked
        $('.newBox').css({
            'left': newBoxLeft,
            'top': newBoxTop
        })

        //Animate it from the orig box position to its final width/height & left/top
        $('.newBox').delay(100).animate({
            'width': newBoxFinalWidth,
            'height': newBoxFinalHeight,
            'left': newBoxDestLeft,
            'top': newBoxDestTop
        }, 2000, 'easeOutExpo')
    }
})

//Clickout function
$(document).click(function(e) { /*if parent of this click is NOT clickout AND this click is NOT clickout then hide stuff*/
    if ($(e.target).parents().is('.clickOut') == false && $(e.target).is('.clickOut') == false) {
        clickOut();
    }
});

function clickOut() {
    $('.newBox').remove()
}

function getOffset(item) {
    var cssOffset = $(item).offset();
    var cssLeft = parseInt(cssOffset.left);
    var cssTop = parseInt(cssOffset.top);

    return {
        'left': cssLeft,
        'top': cssTop
    };
}

【讨论】：

太棒了，我尝试过类似的方法，但没有成功，非常感谢您修复此问题

【解决方案2】：

我知道这是一篇旧帖子。我做了类似的事情，让我烦恼了一整天！更好的解决方案，即保存一个全局变量并使对象自包含：

$('#somethingDraggableToBeClicked').mouseup(function() {
  if ( $("#someParentOrChildElementBeingDragged").is('.ui-draggable-dragging') ) 
    return;
    //your onClick code here...
}

【讨论】：

【解决方案3】：

这个问题也困扰了我几个小时。最后我做了以下事情：

var dragged = false; // Flag

$( '#parent' ).draggable({
    start: function () {
        dragged = true;
    }
});

$( '#child' ).click( function () {
    if ( dragged ) {
        dragged = true; // Reset the flag
        return;
    }
    // Your click code here
});

【讨论】：