Ссылка не будет работать на мобильном телефоне (используя плагин Panzoom JS)

Question

Я использую плагин Panzoom для создания сайта, где все на странице может быть панорамировано. На этой странице есть ссылка на внешний сайт. Когда я запускаю его в настольном браузере, все работает (то есть оно перемещается, и ссылка кликабельна). Но когда я нахожусь на мобильном устройстве, похоже, что ссылка даже не там. Я не могу щелкнуть по нему. Я думаю, что соответствующий код в Panzoom:

_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
            );
        };

Есть ли способ отключить функцию панорамирования, где находится ссылка? Я только хочу, чтобы ссылка была кликабельной, а не вызывала событие панорамирования. Я думаю, что происходит то, что каждый раз, когда сенсорное событие начинается на мобильном телефоне (даже если оно находится поверх ссылки), оно запускает панорамирование.

Спасибо Гарретт

Answer 1

У меня была та же проблема, и я решил проблему, добавив задержку к действию protectDefault(). Это не очень чистое решение, но оно работает.

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