2

Possible Duplicate:
Preventing click event with jQuery drag and drop

Assuming there is a slider of photo gallery. User can drag on the photo slider and select the photo to view when click on the photo. The problem is the click event is overlap with drag event. That means, when user click on the photo to drag, it will occur the click event as well. Thanks

    //slider is draggable
    $('#slider').draggable({axis: "x"});

    //slider photo click event
    $('#slider li').click(function() {
        page_index = $(this).attr('class').substring(4);
        tmp = parseInt(page_index);
        $('#book').turn('page', tmp);
        close_overlay();
    })
Community
  • 1
  • 1
user782104
  • 13,233
  • 55
  • 172
  • 312

1 Answers1

1

I think this issue caused by event bubbling. Try my solution

function cancelBubbleEvent(e) {
    if (e) {
         e.stopPropagation();
    }
    else {
         window.event.cancelBubble = true;
    }
}

//slider is draggable
$('#slider').draggable({axis: "x"});

//slider photo click event
$('#slider li').click(function(e) {
    page_index = $(this).attr('class').substring(4);
    tmp = parseInt(page_index);
    $('#book').turn('page', tmp);
    close_overlay();

    // cancel event bubbling
    cancelBubbleEvent(e);
})
phnkha
  • 7,782
  • 2
  • 24
  • 31