链接在移动设备上不起作用（使用 Panzoom JS 插件）

Posted 2023-05-07

【中文标题】链接在移动设备上不起作用（使用 Panzoom JS 插件）

【英文标题】：Link won't work on mobile (using Panzoom JS plugin)

【发布时间】：2017-05-06 03:16:46

【问题描述】：

我正在使用 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
            );
        ;

有没有办法禁用链接所在的平移功能？我只希望链接是可点击的，而不是触发平移事件。我认为发生的情况是，每当触摸事件在移动设备上开始时（即使它位于链接顶部），它都会触发平移。

谢谢， 加勒特

【问题讨论】：

根据 Panzoom 文档，它说要使用以下内容来禁用元素上的 Panzoom： $elem.panzoom("disable");但我不确定如何仅将其添加到链接中。任何人都可以快速帮助我吗？

好的，我可以通过以下方式禁用链接上的 Panzoom： var $links = $section.find('a').panzoom(); $links.panzoom('.panzoom', options, disablePan: true);当我单击链接时它不再平移，但链接仍然不会在移动设备上的任何地方出现。好像我什至没有点击它们......

【参考方案1】：

我遇到了同样的问题，我解决了在 preventDefault() 操作中添加延迟的问题。它不像解决方案那样干净，但它可以工作。

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