javascript - 防止拖动时触发点击事件

Question

可能重复：
使用 jQuery 拖放防止单击事件

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

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