Impossible de preventDefault dans l'écouteur d'événement passif

Question

J'utilise Liste triable de Framework7 et cela fonctionne bien, juste qu'il ne déclenche pas d'événement lorsque la liste est modifiée.

Donc j'essaie quelques événements intégrés :

$('.sortable-handler').on('touchstart', function (e) {
    e.preventDefault();
    alert('touchstart');
});

$('.sortable-handler').on('touchmove', function (e) {
    e.preventDefault();
    console.log('touchmove');
});

$('.sortable-handler').on('touchcancel', function (e) {
    e.preventDefault();
    console.log('touchcancel');
});

$('.sortable-handler').mouseleave(function (e) {
    e.preventDefault();
    console.log('mouseleave');
});

mais tout ce que j'obtiens est :

Impossible de preventDefault dans l'écouteur d'événement passif en raison de la cible est traitée comme passive. Voir https://www.chromestatus.com/features/5093566007214080

Quel événement dois-je rechercher pour obtenir la liste mise à jour à chaque tri ?

Answer 1

Voir ceci article de blog . Si vous appelez preventDefault sur chaque touchstart alors vous devriez également avoir une règle CSS pour désactiver le défilement tactile, par exemple

.sortable-handler {
  touch-action: none;
}

Answer 2

Pour moi

document.addEventListener("mousewheel", this.mousewheel.bind(this), { passive: false });

a fait l'affaire (le { passive: false } partie).

Answer 3

En JS simple, ajoutez { passive: false } comme troisième argument

document.addEventListener('wheel', function(e) {
    e.preventDefault();
    doStuff(e);
}, { passive: false });

Answer 4

Pour gérer une liste triable dans Framework7 lorsque l'utilisateur relâche l'élément en cours de tri dans une nouvelle position, vous pouvez utiliser ce code :

  $$('li').on('sortable:sort',function(event){
    alert("From " + event.detail.startIndex + " to " + event.detail.newIndex);
  });

Violon : https://jsfiddle.net/0zf5w4y7/

Answer 5

Je rencontre ce problème lorsque j'utilise le carrousel Owl et que je fais défiler les images.

Pour résoudre ce problème, il suffit d'ajouter le CSS ci-dessous dans votre page.

.owl-carousel {
-ms-touch-action: pan-y;
touch-action: pan-y;
}

ou

.owl-carousel {
-ms-touch-action: none;
touch-action: none;
}