jQuery événement dragenter est lancé à chaque enfant

J'ai lié dragenter événement sur un objet qui contient certains enfants.

$(document).on('dragenter', '#container', function(e) {
  console.log('dragenter');
});

Lorsque je me déplace avec fichier déposé autour d'eux, cet événement est déclenché à plusieurs reprises. Ce que j'ai prévu est de tir dragenter uniquement lors de la saisie de #container élément, et pas à chaque enfant.

Est-il le bon comportement? Comment puis-je l'empêcher?

InformationsquelleAutor hsz | 2012-04-24
  1. 12

    Vous pouvez tester si l'élément qui a déclenché l'événement est le conteneur:

    var container = $('#container').get(0);

$(document).on('dragenter', '#container', function(event) {
  if(event.target === container) {
      console.log('dragenter');
  }
});

    Ou si vous n'avez pas à utiliser l'événement de la délégation:

    $('#container').on('dragenter', function(event) {
    if(event.target === this) {
        console.log('dragenter');
    }  
});
    • Malheureusement, dans le cas où #container est entièrement recouvert d'un de ses enfants ce test échoue toujours. N'est-il pas possible de ne pas lier les enfants avec dragend - juste #container ?
    • Ok, je me suis débarrassé de ce à l'aide de votre réponse. Cependant, je suis toujours curieux de liaison juste parent avec un événement. 😉 Merci!
    • votre problème peut être lié à une bugs.webkit.org/show_bug.cgi?id=66547
    InformationsquelleAutor Felix Kling
  2. 0

    essayez d'ajouter stopPropagation

    $(document).on('dragenter', '#container', function(e) {
  e.stopPropagation();
  console.log('dragenter');
});
    • utiliser $('#container') en tant que sélecteur au lieu de $(document)
    • - Je le faire de cette façon parce que j'ai besoin de vivre le comportement de on.
    • la documentation indique que l'événement bulles de l' '#container' pour le sélecteur $(document). Dans votre cas, le comportement attendu est différent du réel et vous avez besoin de filtrer vous-même (pour autant que je peux voir) (voir Félix réponse)
    InformationsquelleAutor bart s
  3. 0

    Ma réponse à cette question est d'utiliser cas de la capture au lieu de remontée d'événements.

    En un mot, l'événement de la capture "coule" à partir de l'élément extérieur, à la source de l'élément, ou jusqu'à ce e.stopPropagation() est appelé.

    Événement bouillonnant bulles d'événements à partir de la source de l'élément en place par les parents jusqu'à ce qu'il atteigne le document ou s'il est arrêté avec e.stopPropagation().

    Donc, pour les appliquer à glisser entrez, vous voulez que l'extérieur de la div pour gérer l'événement, même si il est en fait à l'intérieur de la div qui génère l'événement.

    Événement à l'aide de la capture de rendre le ondragenter feu dans la Div Extérieure avant à l'intérieur de la div. Dans le outter div gestionnaire d'événement, vous appeler.e.stopPropagation. Si l'intérieur de la div gestionnaire d'événement jamais réellement s'exécute.

    Cette est comment faire pour utiliser jquery pour capturer l'événement:

    $("#outerDiv").get(0).addEventListener("ondragenter", function(e){e.stopPropagation()}, true);

    Note le dernier paramètre.

    InformationsquelleAutor Greg Gum