缩放图像后触摸移动事件不会触发（scale3d）

Posted 2023-03-05

【中文标题】缩放图像后触摸移动事件不会触发（scale3d）

【英文标题】：touchmove event won't fire after scaling image (scale3d)

【发布时间】：2013-06-16 12:51:36

【问题描述】：

如您所见：http://jsfiddle.net/hWm9M/1/ 通过在图像缩放时执行touchmove，您可以在控制台中验证touchmove event 是否按预期附加。但是当完全缩放时，事件不会触发。 我尝试在 transitionend 上附加事件，但也没有成功。

代码如下：

var handleStart = function() 
    this.style.webkitTransition = 'all 3s linear'
    this.style.webkitTransform = 'scale3d(2, 2, 0)'
    this.addEventListener("touchmove", handleMove, false)


var handleMove = function() 
    console.log(this)


var image = document.getElementById("img")
image.addEventListener("touchstart", handleStart, false)

有什么想法吗？

【问题讨论】：

始终处理 touchmove 更简单（您在 touchstart 处理程序之后添加一次 evt 列表），并且有一个布尔值告诉您是否正在进行转换。 Rq ：您的代码可能会添加多次事件侦听器/触发多次转换（多点触控情况）。

喜欢jsfiddle.net/53kd8/1 ？这个问题似乎真的与 scale3d 的使用有关。我尝试使用 translate3d 进行测试，转换后事件不断触发。

好吧，如果情况那么清楚（translate3d 可以，scale3d 有问题），你可能只是发现了一个错误......

【参考方案1】：

当您使用 Z 值 == 0 的 scale3d 时会出现问题

我使用的工作方法是将 1 而不是 0 传递给 Z 值：

在你的情况下是这样的：'scale3d(2, 2, 1)'