web-dev-qa-db-fra.com

Empêcher se déplacer par défaut sur le parent mais sur l'enfant

Je suis en train de créer une petite application Web pour iPad et plusieurs éléments empêchent l'utilisateur de faire défiler l'écran en empêchant l'affichage par défaut de l'événement Touchmove. Cependant, j'ai besoin que l'utilisateur puisse faire défiler un élément enfant.

J'ai essayé d'utiliser e.stopPropagation (); mais pas de chance! J'ai également essayé de détecter l'élément sous le doigt et de mettre le e.preventDefault (); dans une déclaration if, mais encore une fois, pas de chance. Ou peut-être que je commençais juste à me mêler ...

Des idées? Supprimer les divs .scroll de #fix div est vraiment un dernier recours, car cela causera toutes sortes de maux de tête.

MODIFIER

J'ai réussi à le trier. On dirait que je n'ai pas compris l'utilisation de .stopPropagation (); Oops!

Le code de travail:

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

Et le Javascript:

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

    e.preventDefault();

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

    e.stopPropagation();

});
javascriptjqueryipadtouch
24
will

Essaye ça:

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

&EACUTE;DIT&EACUTE;

e.target contient le noeud cible final de l'événement tactile. Vous pouvez arrêter tous les événements qui ne "bouillonnent pas" sur vos divs .scroll.

Je pense qu'il y a de meilleures solutions, mais celle-ci doit être ok.

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

L'idée est que votre défilement principal est toujours (à votre discrétion) désactivé, mais que dans votre défilement intérieur, vous empêchez l'événement de se propager (ou de se propager), de sorte qu'il n'atteindra jamais le premier écouteur d'événement, ce qui annulerait le touchmove. un événement.

J'espère que c'est ce que vous cherchiez. J'ai eu une situation similaire à la vôtre, où le parchemin principal a été désactivé sur la tablette, mais je voulais un parchemin interne au travail. Cela semblait faire le travail.

10
Prusprus

Cela devrait fonctionner:

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

J'ai trouvé une discussion intéressante ici: https://github.com/joelambert/ScrollFix/issues/2 , et il existe une bonne solution de bjrn

Fondamentalement, il tire parti des boîtes flexibles. A bien fonctionné pour moi sur ipad. Voici un lien de test qu'il a créé qui le montre au travail: http://rixman.net/demo/scroll/

Ce qui est particulièrement agréable à propos de cette solution, c’est que tout est en CSS et qu’il n’exige pas de javascript. 

2
ryan

J'ai trouvé une autre solution en utilisant css-classes et document.ontouchmove. Je développais une IPad Webapp avec Sliders et je voulais empêcher tous les autres éléments de rebondir lorsqu’il ya un événement touchmove Voici ma solution en tant qu'abrégé:

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

Désormais, seul l'événement touchmove de la div "touchmove_enabled" est déclenché.

Probablement ma solution pourrait être utile à quelqu'un. Patric

1
Patric S.