阻止jquery在父类触发子事件上拖动

Question

我将jquery拖放到DIV容器上，每个子元素都有一个click事件，当我拖动主父容器时，如何防止子事件触发。

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

我已经做了演示：http://jsfiddle.net/sygad/RgdPq/1/

任何帮助表示赞赏。

Answer 1

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

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 
    }; 
}​ 

Answer 2

我知道这是一个老帖子。 我在类似的东西上工作了一整天！ 更好的解决方案，即节省了一个全局变量，使对象自足：

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

Answer 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 
});