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

时间:2016-03-14 15:27:51

标签: javascript photoswipe

我似乎无法使用Photoswipe来阻止拖动/滑动更改幻灯片(因此只有箭头转到上一张/下一张幻灯片)

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

我认为这个事件应该阻止它吗?

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

我也试过了“isClickableElement”'选项,但这似乎无济于事......

1 个答案:

答案 0 :(得分:0)

此方法不是理想的方法,但是如果您希望在不使用修改版的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来随时重新启用滑动。