Question

我正在使用以下Javascript在iOS网络应用的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>

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>

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坐标，因为我们不再需要它们了。

Answer 3

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

令人遗憾的是，这种行为取决于你如何开始滚动。如果你在div区域滚动并且按钮div可以在滚动过程之前调度touchmove事件，它可以工作，否则在滚动完成时将恢复css类。

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

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

希望它有所帮助。侨

ontouchevent手势滚动问题

3 个答案: