防止在照片滑动中滑动/拖动幻灯片

Prevent Swiping/Dragging of slides in PhotoSwipe

本文关键字：拖动 幻灯片 照片      更新时间：2023-09-26

>我似乎无法获得 Photowipe 来防止拖动/滑动更改幻灯片（因此只有箭头转到上一张/下一张幻灯片）

问题是我有一张包含触摸事件的 HTML 幻灯片，但 photowipe 的触摸事件正在取代它们，并且在幻灯片内容中拖动时，整个幻灯片也会移动......

我以为这个事件应该阻止它？

pswp.listen('preventDragEvent', function(e, isDown, preventObj) {
    preventObj.prevent = true;
});

我也尝试了"isClickableElement"选项，但这似乎也没有帮助......

这种方法并不理想，但如果您希望禁用滑动/拖动而不必使用修改后的 PhotoSwipe 版本，这对我有用：

var allowSwipe = false;
function preventSwipe (e) {
    if (!allowSwipe) {
        e.preventDefault();
        e.stopPropagation();
    }
}
pswp.container.addEventListener('pointerdown', preventSwipe);
pswp.container.addEventListener('MSPointerDown', preventSwipe);
pswp.container.addEventListener('touchstart', preventSwipe);
pswp.container.addEventListener('mousedown', preventSwipe);

或者如果你使用的是jQuery：

var allowSwipe = false;
$(pswp.container).on('pointerdown MSPointerDown touchstart mousedown', function () {
    return allowSwipe;
});

使用 allowSwipe 变量，您可以随时通过将轻扫设置为 true 来重新启用轻扫。

相关文章：