Link won't work on mobile (using Panzoom JS plugin)

Question

I'm using the Panzoom plugin to create a site where everything on the page can be panned around. On this page is a link to an external website. When I run it on a desktop browser, everything works (i.e. it pans, and the link is clickable). But when I'm on a mobile device, it's like the link isn't even there. I can't click it. I think the relevant code in Panzoom is:

_startMove: function(event, touches) {
        if (this.panning) {
            return;
        }
        var moveEvent, endEvent,
            startDistance, startScale, startMiddle,
            startPageX, startPageY, touch;
        var self = this;
        var options = this.options;
        var ns = options.eventNamespace;
        var matrix = this.getMatrix();
        var original = matrix.slice(0);
        var origPageX = +original[4];
        var origPageY = +original[5];
        var panOptions = { matrix: matrix, animate: 'skip' };
        var type = event.type;

        // Use proper events
        if (type === 'pointerdown') {
            moveEvent = 'pointermove';
            endEvent = 'pointerup';
        } else if (type === 'touchstart') {
            moveEvent = 'touchmove';
            endEvent = 'touchend';
        } else if (type === 'MSPointerDown') {
            moveEvent = 'MSPointerMove';
            endEvent = 'MSPointerUp';
        } else {
            moveEvent = 'mousemove';
            endEvent = 'mouseup';
        }

        // Add namespace
        moveEvent += ns;
        endEvent += ns;

        // Remove any transitions happening
        this.transition(true);

        // Indicate that we are currently panning
        this.panning = true;

        // Trigger start event
        this._trigger('start', event, touches);

        var setStart = function(event, touches) {
            if (touches) {
                if (touches.length === 2) {
                    if (startDistance != null) {
                        return;
                    }
                    startDistance = self._getDistance(touches);
                    startScale = +matrix[0];
                    startMiddle = self._getMiddle(touches);
                    return;
                }
                if (startPageX != null) {
                    return;
                }
                if ((touch = touches[0])) {
                    startPageX = touch.pageX;
                    startPageY = touch.pageY;
                }
            }
            if (startPageX != null) {
                return;
            }
            startPageX = event.pageX;
            startPageY = event.pageY;
        };

        setStart(event, touches);

        var move = function(e) {
            var coords;
            e.preventDefault();
            touches = e.touches || e.originalEvent.touches;
            setStart(e, touches);

            if (touches) {
                if (touches.length === 2) {

                    // Calculate move on middle point
                    var middle = self._getMiddle(touches);
                    var diff = self._getDistance(touches) - startDistance;

                    // Set zoom
                    self.zoom(diff * (options.increment / 100) + startScale, {
                        focal: middle,
                        matrix: matrix,
                        animate: 'skip'
                    });

                    // Set pan
                    self.pan(
                        +matrix[4] + middle.clientX - startMiddle.clientX,
                        +matrix[5] + middle.clientY - startMiddle.clientY,
                        panOptions
                    );
                    startMiddle = middle;
                    return;
                }
                coords = touches[0] || { pageX: 0, pageY: 0 };
            }

            if (!coords) {
                coords = e;
            }

            self.pan(
                origPageX + coords.pageX - startPageX,
                origPageY + coords.pageY - startPageY,
                panOptions
            );
        };

Is there a way to disable the panning feature where the link is? I only want the link to be clickable, not trigger the pan event. I think what's happening is that any time a touch event starts on mobile (even if it's on top of a link), it triggers the pan.

Thanks, Garrett

Answer 1

i had the same issue and i resolved the problem in adding a delay to the preventDefault() action. It's not very clean like solution but it's work.

setTimeout(function() {
  e.preventDefault();
  e.stopPropagation();
}, 250);