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事件。我认为发生的事情是，只要触摸事件在移动设备上启动（即使它位于链接之上），它就会触发平移。

谢谢，盖瑞特

Answer 1

我有同样的问题，我解决了在preventDefault（）操作中添加延迟的问题。它不像解决方案那样干净，但它起作用。

＆＃13;

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

＆＃13;

Link不会在移动设备上工作（使用Panzoom JS插件）

1 个答案: