防止拖动时触发点击事件[重复]

Posted 2023-05-08

【中文标题】防止拖动时触发点击事件[重复]

【英文标题】：Prevent click event triggered when dragging [duplicate]

【发布时间】：2012-12-16 11:57:43

【问题描述】：

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

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

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

【问题讨论】：

抱歉，这个错误似乎是由我以前的代码引起的，您提供的链接运行良好。谢谢

【参考方案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);
)

【讨论】：

对不起它不起作用，当我拖动照片时，它仍然触发点击事件

也许你应该在 JSFiddle.net 上做一个演示

谢谢，我使用了类似的想法，它有效