ontouchevent-Geste scrollen Probleme

Ich bin mit dem folgenden Javascript-Code erzeugt, ontouchstart/verschieben/Ende Rückrufe auf div-Elemente für eine iOS-web-app. Das einzige problem im moment ist, dass, wenn Sie versuchen, einen Bildlauf nach oben und unten die Seite, löst das ontouchstart-element und ändert die CSS der div. Ich will die CSS das div zu ändern nur, wenn ein Benutzer das Element auswählt. Ich bin ziemlich basic mit Javascript, aber wenn jemand weiß, jeder Weg, der Javascript-Code wird nur dann ausgelöst, wenn ein Benutzer die Auswahl einer Option, es würde sehr geschätzt werden!

Dank!

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>

Mehr details würden helfen, Ihre Frage ist etwas unklar. Was genau meinst du mit "ein Element auswählt"? Meinst du Benutzer tippt unten, und dann freigibt, ohne sich zu bewegen, die signifikant nach oben und unten über den Bildschirm?

InformationsquelleAutor TronCraze | 2011-02-01

verwenden event.stopPropagation() zum stoppen des event-bubbling, und verwenden Sie event.preventDefault() zu vermeiden, die die Standard-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>

Heya, ich habe versucht, Ihren Vorschlag, aber es noch scheint nicht zu funktionieren leider.

InformationsquelleAutor yuxhuang

0

Vorausgesetzt, ich bin zu verstehen, was Sie gefragt haben:

Hinzufügen ontouchstartCallback:
```
if(event.touches.length < 1) return;
event.target.touchdata = [event.touches[0].clientX, event.touches[0].clientY];
```
Ersetzen Inhalt ontouchmoveCallback mit:
```
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;
    }
}
```
Was das ist zu tun:

Wenn ein touch-event beginnt, die X/Y Koordinaten werden an den berührten DOM-element. Dann auf jedes event, überprüft es, ob die Bewegung ist mehr als ein bestimmter Schwellenwert der Pixel Weg (in diesem Fall 5). Wenn dem so ist, ändern wir wieder die Klasse vorzeitig, und entfernen Sie die X/Y coords, da wir Sie nicht mehr benötigen.
- Hallo Lukas, ich habe versucht, Ihren Vorschlag, aber es scheint nicht zu funktionieren.
InformationsquelleAutor Luke Dennis
0

Soweit ich weiß, ist es richtig zu verwenden, nur die onmousemove handler tauschen className zu der default-Zustand. Das problem Ihrer Knopf freeze beim iPhone scrollen Beziehung zu einem anderen Problem: wenn Sie versuchen, einen Bildlauf Ihrer Ansicht nach jeder Interaktion mit der Seite rendering gesperrt ist, zum ausführen eines Bildlaufs mit einer guten Leistung und Konflikte zu vermeiden. Dann wird der Inhalt von der Seite sieht eingefroren. Das ist, warum Sie Ihre Buttons nicht wieder auf den Standard-Zustand sein, bevor das scrollen.

Das traurige daran ist, dass dieses Verhalten hängt davon ab, wie Sie starten Sie den Bildlauf. Wenn Sie einen Bildlauf auf der div-Bereich und die Schaltfläche div versenden können eine touchmove Fall vor das scrolling-Verfahren, es funktioniert, sonst wird die css-Klasse wird wiederhergestellt werden, wenn das scrollen fertig sein wird.

Einige JavaScript-touch-frameworks lösen dies, indem er den berührt, Veranstaltungen und verhindern, dass Standard-browser Verhaltensweisen (wie z.B. das scrollen) und Umsetzung Ihrer eigenen scrolling-system.

Ich weiß, es ist keine Lösung, aber könnte eine Erklärung sein.

Hoffe, es hilft.
Ciao.

InformationsquelleAutor lomanf

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.