触摸事件手势滚动问题

Question

我使用以下Javascript为iOS Web应用程序上的div元素创建ontouchstart/move/end回调。目前唯一的问题是，当您尝试上下滚动页面时，它会触发ontouchstart元素并更改div的CSS。我希望div的CSS仅在用户选择该项时更改。我的Javascript基础相当基础，但如果有人知道如何让Javascript仅在用户选择项目时触发，那将不胜感激！

谢谢！

TC

Javascript:

function onclickCallback( event ) {

}

function ontouchstartCallback( event ) {

event.target.className = 'choice_link_selected';
}

function ontouchmoveCallback( event ) {

event.target.className = 'choice_link_selected';
}

function ontouchendCallback( event ) {

event.target.className = 'choice_link';

}

HTML:

<div class="choice_link" onclick="onclickCallback(event);" ontouchstart="ontouchstartCallback(event);" ontouchend="ontouchendCallback(event);" ontouchmove="ontouchmoveCallback(event);">
            <a href="javascript:location.href='test.php'">Test</a>
         </div>

- TronCraze

---

更多细节会有帮助，因为你的问题有些含糊不清。你所说的“选择一个项目”到底是什么意思？你是指用户按下并释放而没有在屏幕上显著地上下移动吗？ - Luke Dennis

Answer 1

使用 event.stopPropagation() 来阻止事件冒泡，使用 event.preventDefault() 来避免默认处理程序。

<div id="ctr" class="choice_link">
     <a href="javascript:location.href='test.php'">Test</a>
</div>
<script>
function onTouchStart(event) {
  event.stopPropagation();
  event.preventDefault();
  event.target.className = 'selected';
}

function onTouchEnd(event) {
  event.stopPropagation();
  event.preventDefault();
  event.target.className = '';
}

var ctr = document.getElementById('ctr');
ctr.addEventListener('touchstart', onTouchStart, false);
ctr.addEventListener('touchend', onTouchEnd, false);
</script>

- yuxhuang

---

嗨，我尝试了你的建议，但不幸的是它仍然似乎无法工作。 - TronCraze

Answer 2

假设我理解你的问题：

在ontouchstartCallback中添加：

if(event.touches.length < 1) return;
event.target.touchdata = [event.touches[0].clientX, event.touches[0].clientY];

将 ontouchmoveCallback 的内容替换为：

if(event.touches.length < 1) return;
var threshold = 5;
if(event.target.touchdata)
{
    if(Math.abs(event.touches[0].clientX - event.target.touchdata[0]) > threshold
    || Math.abs(event.touches[0].clientY - event.target.touchdata[1]) > threshold)
    {
        event.target.className = 'choice_link';
        event.target.touchdata = false;
    }
}

这段代码的作用：

当触摸事件开始时，X/Y坐标会附加到被触摸的DOM元素上。然后在每次移动事件中，它会检查移动是否超过了一定阈值的像素（在此例中为5）。如果是，则提前更改回类，并删除X/Y坐标，因为我们不再需要它们。

- Luke Dennis

---

嗨，Luke，我尝试了你的建议，但似乎不起作用。 - TronCraze

Answer 3

据我所知，仅使用onmousemove处理程序将className交换到默认状态是正确的。你在iPhone滚动期间遇到的按钮状态冻结问题与另一个问题有关：当你尝试滚动视图时，页面渲染的任何交互都被锁定以执行具有良好性能并避免冲突的滚动。然后页面内容看起来被冻结了。这就是为什么你的按钮在滚动之前无法恢复到默认状态的原因。

可悲的是，这种行为取决于你如何开始滚动。如果你在div区域滚动，按钮div可以在滚动过程之前派发touchmove事件，则它可以正常工作，否则css类将在滚动完成后恢复。

一些JavaScript触摸框架通过捕获触摸事件并防止浏览器的默认行为（如滚动）并实现自己的滚动系统来解决这个问题。

我知道，这不是一个解决方案，但可能是一种解释。

希望对你有帮助。 再见。

- lomanf