Question

可能重复：
Preventing click event with jQuery drag and drop

假设有一个照片库的滑块。用户可以拖动照片滑块并选择要在单击照片时查看的照片。问题是click事件与drag事件重叠。这意味着，当用户点击要拖动的照片时，也会发生点击事件。感谢

    //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();
    })

Answer 1

我认为这个问题是由事件冒泡引起的。试试我的解决方案

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

阻止拖动时触发的单击事件

1 个答案: