Ссылка не будет работать на мобильных устройствах (с использованием плагина 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 
      ); 
     }; 

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

Спасибо, Garrett

Answer 1

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

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