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

我的修复方法是创建一个“隐藏”的输入元素，并将焦点调用到它上面，这会奇怪地使点击返回。

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();
}