Question

我在我的代码中使用了hammer.js插件进行拖动事件，它在首次加载页面时正常工作，但如果重新加载同一页面则不起作用。为什么？

（function（）{

$.fn.touchpanzoom = function() {

var $img = $(this)
var zoomer = $img.panzoom() 
var hammer = new Hammer($img.get(0), {
  prevent_default: true
})

applyDragFunction(zoomer, hammer)

}

function applyDragFunction（zoomer，hammer）{

var dragTimer = null
var lastDrag = {
  x: 0,
  y: 0
}

var currentDrag = {
  x: 0,
  y: 0
}

function updateDrag() {
    var x = lastDrag.x - currentDrag.x
    var y = lastDrag.y - currentDrag.y 
    lastDrag.x = currentDrag.x
    lastDrag.y = currentDrag.y
    zoomer.pan(x, y, 0)       
}

hammer.ondragstart = function(e) {
  lastDrag.x = 0
  lastDrag.y = 0      
  dragTimer = setInterval(updateDrag, 20)
  return false
}
hammer.ondrag = function(e) {
    currentDrag.x = e.distanceX      
    currentDrag.y = e.distanceY
  return false
}

hammer.ondragend = function() {
  clearInterval(dragTimer)
  updateDrag()
  return false
}

} } （））

Please visit this site to download the Plugin

Answer 1

将}())更改为})();）这看起来很可疑。

更新。

(function() {

$.fn.touchpanzoom = function() {

var $img = $(this)
var zoomer = $img.panzoom() 
var hammer = new Hammer($img.get(0), {
  prevent_default: true
}) <--- add () here

这是您拥有的合法代码吗？为什么不每次都打电话呢？现在，看起来你只是添加了一段代码（在加载时应运行一次，但在重新加载时不运行）。我认为这就是问题所在。

重新加载网页时，拖动事件不起作用

1 个答案: