Microsoft Edge: Onclick Event Stops Working?

I have strange problems with my (ASP.NET) web application in Microsoft Edge. At a certain point the onclick event stops working. All buttons on the page that respond to the onclic

Solution 1:

This is not a complete answer, as it doesn't address whyclick events don't work, but I feel it belongs here, as my team and I were hopelessly stuck trying to find an answer to this question. It appears to be a bug in Edge, and every workaround we tried failed, until I stumbled upon @Come's comment above.

The solution was to change all of our click events to mouseup events, emulating the same behavior. For some reason mouseup was triggered even when click wasn't. mousedown works as well, but mouseup more-properly emulates click.

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

// ...

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

Hopefully this helps someone!

Solution 2:

This is a bug in Edge.

What I've found is that it's related to both popping up a child window and rearranging(or modifying) tr's in a table.

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

To fix this, you have to force the table to redraw. You can do this by setting display:none before modifying the table, and then setting display:previousValue after changing it.

Hope this helps.

Solution 3:

My fix was to create a "hidden" input element and call focus on it which magically makes the clicks return.

Solution 4:

In my case, removing child elements bring this problem. Therefore when I remove the element (including replace DOM by innerHTML), I make style.display = "none" for the element before removing. This resolves the issue.

For example, I use this function

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

instead of

functionremoveComponent(selector) {
  return $(selector).detach();
}