3

我正在使用以下 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>
4

3 回答 3

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>
于 2011-02-01T05:21:45.080 回答
0

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

可悲的是，这种行为取决于您如何开始滚动。如果在 div 区域上滚动，并且按钮 div 可以touchmove在滚动过程之前派发事件，则有效，否则滚动完成时将恢复 css 类。

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

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

希望能帮助到你。再见。

于 2011-02-01T07:52:17.250 回答
0

假设我理解你在问什么：

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

于 2011-02-01T05:25:28.943 回答