Ontouchevent gesture scrolling issues

Question

I am using the following Javascript to create ontouchstart / move / end callbacks for div elements for an iOS web application. The only problem at the moment is that when I try to scroll up and down the page, it launches the ontouchstart element and changes the CSS div. I want the CSS div to only change when the user selects an element. I am pretty simple with Javascript, but if anyone knows how to get Javascript to run only when the user selects an item, we will be very grateful!

Thank!

Tf

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

Some JavaScript frameworks allow this by catching touch events and preventing default browser behavior (for example, scrolling) and implementing their own scrolling system.

I know this is not a solution, but it can be an explanation.

Hope this helps. Ciao.