web-dev-qa-db-fra.com

Microsoft Edge: l'événement onclick ne fonctionne plus?

J'ai des problèmes étranges avec mon application Web (ASP.NET) dans Microsoft Edge.

À un certain moment, l'événement onclick cesse de fonctionner. Tous les boutons de la page qui répondent à l'événement onclick cessent de fonctionner. Sur la même page, j'ai quelques boutons qui répondent à l'événement onmousedown et ils continuent de fonctionner.

Si je rafraîchis la page, le problème a disparu. Il n'y a aucune erreur dans la console. Je n'ai pas ce problème avec d'autres navigateurs (y compris IE11 sous Windows 10).

Avez-vous rencontré des problèmes similaires?

javascriptjavascript-eventsonclickmouseeventmicrosoft-edge
18
Corne

Ce n'est pas une réponse complète, car elle ne traite pas des événements pourquoiclick ne fonctionnent pas, mais je pense que cela appartient ici, car mon équipe et moi étions désespérément coincés à essayer de trouver une réponse à cette question. Il semble que ce soit un bug dans Edge, et toutes les solutions de contournement que nous avons essayées ont échoué, jusqu'à ce que je tombe sur le commentaire de @ Come ci-dessus.

La solution consistait à remplacer tous nos événements click par des événements mouseup, en émulant le même comportement. Pour une raison quelconque, mouseup a été déclenché même lorsque click ne l'a pas été. mousedown fonctionne également, mais mouseup émule plus correctement click.

var listenType = (navigator.userAgent.toLowerCase().indexOf('Edge') != -1) ? 'mouseup' : 'click';

// ...

$("#my_element").on(listenType, function() 
{
    // ...
}

Espérons que cela aide quelqu'un!

7
Will

Il s'agit d'un bogue dans Edge.

Ce que j'ai trouvé, c'est qu'il s'agit à la fois de faire apparaître une fenêtre enfant et de réorganiser (ou de modifier) ​​les tr dans un tableau.

https://connect.Microsoft.com/IE/feedback/details/2109810/browser-stops-registering-click-events-on-table

Pour résoudre ce problème, vous devez forcer le tableau à se redessiner. Pour ce faire, définissez display: none avant de modifier le tableau, puis définissez display: previousValue après l'avoir modifié.

J'espère que cela t'aides.

5
Kelly Elton

Mon correctif était de créer un élément d'entrée "caché" et d'appeler le focus dessus, ce qui fait que les clics reviennent comme par magie.

2
neptunian

Dans mon cas, la suppression d'éléments enfants pose ce problème. Par conséquent, lorsque je supprime l'élément (y compris remplacer DOM par innerHTML), je fais style.display = "none" pour l'élément avant sa suppression. Cela résout le problème.

Par exemple, j'utilise cette fonction

function removeComponent(selector) {
  $(selector).css("display", "none");
  return $(selector).detach();
}

au lieu de

function removeComponent(selector) {
  return $(selector).detach();
}
1
KNaito