hammer.js - 需要默認縮放行爲+刷卡

Question

我想讓它滑過圖片會根據滑動的方向將用戶導向上一張或下一張圖片。這部分工作很好，但它消除了放大圖像的能力。根據this answer，解決方案是啓用touchAction: 'auto'，但是完全打破了hammer.js，完全阻止了它的工作。

代碼：

<script src="../js/hammer.min.js"></script> 
<script> 
$('.imagecontainer').each(function(){ 
    var options = { 
    touchAction: 'auto', 
    }; 
    var mc = new Hammer(this, options); 

    mc.on("swipeleft", function() { 
    navTo('jsnavnext'); 
    return false; 
    }); 
    mc.on("swiperight", function() { 
    navTo('jsnavprev'); 
    return false; 
    }); 
}); 
</script> 

我可以捏放大到可能與touchAction: 'pan-y'用戶友好的方式至少工作（基本上要求用戶做出一個古怪的圓周運動），但是這不是...大。理想情況下，我希望hammer.js只添加滑動導航，不要觸及任何其他默認行爲。

Answer 1

我有一個類似的問題。我想能夠在div上檢測到滑動，並且能夠在div上縮放縮放。單獨滑動偵聽器似乎禁用縮放。添加touchAction:'auto'允許我捏縮放，但它讀取會觸發我的滑動動作和滾動（我不希望它滾動，只想觸發滑動動作）。我在這裏解決的關鍵部分是使用recognizeWith，然後撥打preventDefault在panstart和panmove。這使我只是期望的雙指縮放和刷卡

這裏是我的解決方案：

var target = document.getElementById("target-div") 
    var mc = new Hammer(target, {touchAction: 'auto' }); 

    mc.add(new Hammer.Pan({ 
    direction: Hammer.DIRECTION_ALL, 
    threshold: 0 })); 

    mc.add(new Hammer.Swipe({ 
    direction: Hammer.DIRECTION_ALL, 
    threshold: 1, 
    velocity:0.1 
    })).recognizeWith(mc.get('pan')); 

    mc.on('panstart panmove', function(ev) { ev.preventDefault(); }); 

    mc.get('pinch').set({ enable: true }); 

    mc.on("pinch", function(ev) { 
    //do anything you need to here, or not 
    }); 

    mc.on("swipeleft", function(ev) { 
    //do something 
    } 

    mc.on("swiperight", function(ev) { 
    //do something 
    } 

我還是新的hammer.js，但我已經注意到了很多，人們試圖在GitHub上的問題將多個手勢組合在同一個元素上。我希望這有幫助！