Microsoft Edge: onclick event stops working?

Question

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 onclick event stop working. On the same page I have some buttons that respond to the onmousedown event and they keep working.

If I refresh the page, the problem is gone. There are no errors in the console. I do not have this problem with other browsers (including IE11 under Windows 10).

Did any of you experience similar problems?

Answer 1

This is not a complete answer, as it doesn't address why click 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!

Answer 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.

Answer 3

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

Answer 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

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

instead of

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