Pourquoi l'événement onClick est-il déclenché deux fois?

J'ai le code html suivant:

<span onclick="alert('Boem')">
    <button id="test1">test</button>
</span>

Lorsque j'appelle le code javascript suivant:

$('#test1').trigger('click');

L'événement onclick est déclenché deux fois, alors que je m'attends à déclencher juste une fois. Parce que JQuery devrait ressembler op dans l'arborescence du DOM et de trouver un seul clic.

Je n'ai pas le contrôle de la durée, il est généré dans un outil tiers. Je dois avoir le contrôle sur le bouton et de ses paramètres.

Vous pouvez trouver un JSFiddle exemple ici:
http://jsfiddle.net/Voga/v4100zke/

Mise à jour

Je ne sais pas le contenu de la onclick auditeur de la plage. C'est aussi généré par la 3ème partie de l'outil. Je veux le cliquez sur la gâchette pour exécuter cette onclick comme il le fait maintenant, mais seulement une fois.

source d'informationauteur Dommicentl

  1. 11

    C'est de l'appeler deux fois parce que le bouton est à l'intérieur d'une période et la durée de l'a onclick="alert('Boem')"c'est pourquoi, lorsque vous déclenchez cliquez sur le bouton puis il montre d'alerte et même événement click se propager à d'envergure et montre alerte une fois de plus.

    vous avez besoin d'arrêter le comportement par défaut du bouton à l'aide de code ci-dessous :

    $(function(){
$('#test1').click(function(e){e.preventDefault();}).click();
});

    Démo

  2. 4

    pour arrêter la propagation de l'évènement utilisation :stopPropagation

    $( "#test1" ).on( "click", function(ev) {
    ev.stopPropagation();
});
$('#test1').trigger('click');

    Veuillez noter que, dans l'ordre des événements sont affectés dans les DOM.

    DÉMO

  3. 1

    De bulles. L'événement click sur l'enfant, se passe aussi sur le parent (span).

  4. 0

    Ce fil permettra de répondre au "pourquoi" de.

    Une meilleure façon serait de simplement attribuer un gestionnaire de clic sur l'élément de manière à maintenir votre Javascript abstraite de l'HTML:

    http://jsfiddle.net/v4100zke/3/

    $('#test1').click(function() {
    alert('Boem')
});

    Espère que ça aide.

  5. 0

    Cela devrait aussi fonctionner:

    $($('#test1').parent()).trigger('click');
  6. 0

    Ici button click is triggered. Depuis le button est à l'intérieur de la span et onclick événement est défini pour span la two alert êtes arrivé. 

    One is by the button

    et

    other by its parent(parent d'événement onclick et cliquez sur le bouton est déclenchée).

    À éviter les deux d'alerte, utilisez ce 

    <span>
    <button onclick="alert('Boem')" id="test1">test</button>
</span>
  7. 0

    J'ai eu le même problème. Le mien était le fait que j'ai été en utilisant .trigger('.element') et il y avait deux éléments avec qui element classe.

    Donc, j'ai obtenu plus spécifiques, et utilisé .trigger('.parent .element') pour assurer un seul clic événement s'est produit sur un seul élément, au lieu d'un événement de clic sur les deux éléments.

  8. 0

    Note que vous avez utilisé jQuery cliquez sur la méthode, il émet deux dom de la souris, cliquez sur l'événement et jquery cliquez sur l'événement. Puis les deux jquery cliquez sur l'Événement et dom de la souris, cliquez sur l'événement sont propagées à la durée de l'élément et de ses onclick auditeur est déclenché deux fois par conséquent, il alerte deux fois

    cochez cette démo
    figure

    quant à la façon de traiter avec elle, il suffit d'utiliser stopPropagation que les réponses ci-dessus

    $('#test1').click(function() {

  //comment this line and run, 'parent' will be alerted TWICE!!! since both mouseEvent and jQuery.Event trigger the onclick listener
  $('#children').click(function(e) {e.stopPropagation()})

});