Disabling click/touch on certain elements

I’ve added a scrubber and using it like so:

scrubber.onValueChanged = function (value) {
  gallery.goTo(value);
};
gallery.listen('afterChange', function() { scrubber.value(gallery.getCurrentIndex()); });
gallery.listen('close', function() { $('.pswp__scrubber').empty(); });

… it seems to work well except that when I’m interacting with the scrubber, PS slides the images. How do I disable slide/drag only on the .pswp__scrubber element?

I tried this, but the slides still “shake” when I use the scrubber:

gallery.listen('preventDragEvent', function(e, isDown, preventObj) {
    if ( $(".thumb.dragging") ) {
        console.log(1);    
        isDown = false;
        preventObj.prevent = true;
    }
});

(the scrubber handle has class dragging while its being used)

EDIT:

Also tried:

gallery.listen('preventDragEvent', function(e, isDown, preventObj) {
    if (e.target.className === "scrubber" || e.target.className === "track" || e.target.className === "thumb" ) {
        isDown = false;
        preventObj.prevent = true;
        console.log(e.target.className);
    }
});

… but its the same.

[dimsemenov]

@namespace-dave yep, that’s correct, I was typing the same thing before I saw your edit

[davegreenwp]

@dimsemenov do you have an example for the best approach to unbind pointerdown from .pswp__scroll-wrap ?

UPDATE:

If you are looking to prevent the pointerDown event from firing on specific elements contained within the .pswp__scroll-wrap element. you can do this using the custom pointerDown event hat is dispatched on the scroll wrap; see here .

If you add an event listener for that custom event, carry out a check, and then event.preventDefault() it will work as desired.