sygad1 sygad1 - 1 year ago 69
jQuery Question

Prevent jquery draggable on parent firing child event

I have jquery draggable attached to a DIV container, each of its child elements has a click event, how do I prevent the child event from firing when I drag the main parent container.

I only want to fire the child event when I click on it, not when I drag the whole thing.

I have made a demo:

Any help appreciated.

Answer Source

You can use a temp variable to track the drag status and then change from the click event to the mouseup event like this jsFiddle example.


var bodyWidth = $(window).width();
var bodyHeight = $(window).height();
var dragging = false;
    containment: "window",
    start: function() {
        dragging = true;
    stop: function() {
        dragging = false;

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

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

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

        //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

        //Position it to overlay the box we just clicked
            'left': newBoxLeft,
            'top': newBoxTop

        //Animate it from the orig box position to its final width/height & left/top
            '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 ($('.clickOut') == false && $('.clickOut') == false) {

function clickOut() {

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

    return {
        'left': cssLeft,
        'top': cssTop
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download