webentwicklung-frage-antwort-db.com.de

Verhindern Sie den Touchmove-Standard für das übergeordnete Element, nicht jedoch für das untergeordnete Element

Ich erstelle eine kleine Web-App für das iPad und habe mehrere Elemente, die den Benutzer am Scrollen hindern, indem er die Standardeinstellung für das Touchmove-Ereignis verhindert. Ich habe jedoch eine Situation, in der der Benutzer ein untergeordnetes Element scrollen muss.

Ich habe versucht, e.stopPropagation () zu verwenden. aber kein glück! Ich habe auch versucht, das Element unter dem Finger zu erkennen und das e.preventDefault () zu setzen. in einer if-Anweisung, aber auch hier kein Glück. Oder vielleicht wurde ich nur durcheinander gebracht ...

Irgendwelche Ideen? Das Entfernen der .scroll-divs aus dem #fix-div ist wirklich ein letzter Ausweg, da dies allerlei Kopfschmerzen verursacht.


EDIT

Ich habe es geschafft, es zu sortieren. Anscheinend habe ich die Verwendung von .stopPropagation () nicht verstanden. Hoppla!

Der Arbeitscode:

<div id="fix">

    <h1>Hi there</h1>

    <div class="scroll">
        <ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>
    </div>

    <div class="scroll">
        <ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>
    </div>

</div>

Und das Javascript:

$('body').delegate('#fix','touchmove',function(e){

    e.preventDefault();

}).delegate('.scroll','touchmove',function(e){

    e.stopPropagation();

});
24
will

Versuche dies:

$('#fix').on('touchmove',function(e){
    if(!$('.scroll').has($(e.target)).length)
        e.preventDefault();
});

BEARBEITET

e.target enthält den endgültigen Zielknoten des Berührungsereignisses. Sie können alle Ereignisse stoppen, die nicht über Ihre .scroll-Divis "sprudeln".

Ich denke, es gibt bessere Lösungen, aber diese muss in Ordnung sein.

17
Grsmto
document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
document.getElementById('inner-scroll').addEventListener('touchmove', function(e){e.stopPropagation()}, false);

Die Idee ist, dass Ihre Hauptrolle (nach Ihrem Ermessen) immer deaktiviert ist, aber in Ihrer inneren Schriftrolle verhindern Sie, dass das Ereignis sprudelt (oder sich ausbreitet), sodass es niemals den ersten Ereignis-Listener erreicht, wodurch der Touchmove letztendlich abgebrochen wird Veranstaltung.

Ich hoffe, das ist, wonach Sie gesucht haben. Ich hatte eine ähnliche Situation wie Sie, als die Hauptrolle auf dem Tablet deaktiviert war, aber ich wollte, dass eine innere Schriftrolle funktioniert. Dies schien den Job zu erledigen.

10
Prusprus

Das sollte funktionieren:

$(document).on('touchmove', function(e) {
    if (!$(e.target).parents('.scroll')[0]) {
        e.preventDefault();
    }
});
8
nick

Ich habe hier eine interessante Diskussion gefunden: https://github.com/joelambert/ScrollFix/issues/2 und es gibt eine gute Lösung von bjrn

Grundsätzlich nutzt es Flexboxen. Funktionierte gut für mich auf ipad. Hier ist ein Testlink, den er eingerichtet hat, um ihn bei der Arbeit zu zeigen: http://rixman.net/demo/scroll/

Besonders schön an dieser Lösung ist, dass alles CSS und kein Javascript erforderlich ist. 

2
ryan

Ich habe eine andere Lösung gefunden, die css-classes und document.ontouchmove verwendet. Ich entwickle eine IPad-Webapp mit Sliders und wollte verhindern, dass alle anderen Elemente abspringen, wenn ein Touchmove-Ereignis auftritt. Dies ist meine Lösung als Zusammenfassung:

HTML:

<body>
  <div id="outterFrame" class="fullscreen"> <!-- class fullscreen is self-explaining I guess -->
      <div id="touchmove_enabled class="enable_touchmove sliderbutton">Button</div>
  </div>
</body>

Javascript:

/* preventDefault on touchmove events per default */
document.ontouchmove = function(event)
{
   var sourceElement = event.target || event.srcElement;
   if(!hasClass(sourceElement,"enable_touchmove"))
{
   e.preventDefault();
}
};

/* helper method "hasClass" */
function hasClass(element,class)
{
if(element.className != null)
{
    return element.className.match(new RegExp('(\\s|^)'+class+'(\\s|$)'));
}
return false;
}

Jetzt wird nur das touchmove-Ereignis des div "touchmove_enabled" ausgelöst.

Wahrscheinlich kann meine Lösung für jemanden nützlich sein. Patric

1
Patric S.