pourquoi jQuery Cliquez et changez des événements en tirant à différents moments sur Chrome vs Safari ou IE

Question

Je travaille sur la correction d'un bug de navigateur croisé sur un site Web, et j'ai trouvé la cause de cela que le jQuery Click & à des moments différents en fonction de votre navigateur.

Par exemple, sur Chrome et Firefox, l'événement Click se déclenche avant l'événement de modification. Alors que sur Safari ou IE 11 c'est l'inverse.

Je m'attendais à ce que l'utilisation de jQuery ne se soit pas produite car jQuery est connu pour être bien testé pour la compatibilité croisée.

Quoi qu'il en soit, Est-il possible avec jQuery/JavaScript de s'assurer que le code dans la fonction .click est toujours exécuté avant le code dans la fonction .change quel que soit le navigateur?
Je me rends compte, avec l'exemple ci-dessous, que je pourrais tout mettre dans un des événements mais je me demande si ce que je demande est possible.

Voici un exemple du code

var $input = $('input[name="foobar"]'); 
 
$input.click(function() { 
 
    console.log("Click event called for input with value " + $(this).val()); 
 
    }); 
 
$input.change(function() { 
 
    console.log("Change event called for input with value " + $(this).val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form action="http://example.com/checkout/add/" id="product_addtocart_form" method="post" name="product_addtocart_form"> 
 
    <ul> 
 
    <li> 
 
     <label for="option_1"> 
 
\t <input value="10" name="foobar" checked="checked" data-name="foo" id="option_1" type="radio"> 
 
\t <span>Foo</span> 
 
     </label> 
 
    </li> 
 
    <li> 
 
     <label for="option_2"> 
 
\t <input value="12" name="foobar" data-name="bar" id="option_2" type="radio"> 
 
\t <span>Bar</span> 
 
     </label> 
 
    </li> 
 
    </ul> 
 
    <button onclick="productAddToCartForm.submit(this)" title="Add to Basket" type="button">Add to Basket</button> 
 
</form>

Si vous exécutez l'extrait et cliquez sur les boutons radio, vous verrez dans la console de l'ordre des événements étant tiré .

Je l'ai testé sur Chrome 60, FireFox 54, Safari 10.1 et Internet Explorer 11

Answer 1

Une option serait de définir un événement personnalisé et utiliser .trigger() pour distribuer l'événement au sein de gestionnaire d'événements click

var $input = jQuery('input[name="foobar"]'); 
 
$input.on("click", function() { 
 
    console.log("Click event called for option with value " + jQuery(this).val()); 
 
    $(this).trigger("customChange", ["customChange called from click handler"]) 
 
    }); 
 
$input.on("customChange", function(e, customChangeData) { 
 
    console.log("Change event called for option with value " + jQuery(this).val(), customChangeData); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form action="http://example.com/checkout/add/" id="product_addtocart_form" method="post" name="product_addtocart_form"> 
 
    <ul> 
 
    <li> 
 
     <label for="option_1"> 
 
\t <input checked="checked" data-name="foo" id="option_1" name="foobar" type="radio" value="10"> 
 
\t <span>Foo</span> 
 
     </label> 
 
    </li> 
 
    <li> 
 
     <label for="option_2"> 
 
\t <input data-name="bar" id="option_2" name="foobar" type="radio" value="12"> 
 
\t <span>Bar</span> 
 
     </label> 
 
    </li> 
 
    </ul> 
 
    <button title="Add to Basket" type="button">Add to Basket</button> 
 
</form>