ontouchevent手势滚动问题 [英] ontouchevent gesture scrolling issues

问题描述

我正在使用以下Javascript在iOS Web应用程序的div元素上创建ontouchstart/move/end回调.目前唯一的问题是，当您尝试上下滚动页面时，它将触发ontouchstart元素并更改div的CSS.我希望当用户选择项目时div的CSS仅更改 .我对Java基本了解，但是如果有人知道任何使Java仅在用户选择项目时触发的方法，将不胜感激！

I'm using the following Javascript to create ontouchstart/move/end callbacks on div elements for an iOS web app. The only problem at the moment is that when you try to scroll up and down the page, it triggers the ontouchstart element and changes the CSS of the div. I want the CSS of the div to change only when a user selects the item. I'm fairly basic with Javascript but if anyone knows any way of getting the Javascript to only trigger when a user is selecting an item it would be greatly appreciated!

谢谢！

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>

推荐答案

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

use event.stopPropagation() to stop the event bubbling, and use event.preventDefault() to avoid the default handler.

<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>

这篇关于ontouchevent手势滚动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！