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?

Solution 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!

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

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

instead of

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

View more solutions

Comments

[j08691]

Post your code in your question please.

[Corne]

It's not that simple. The problem occurs in a complex ASP.NET/Ajax application. I did not yet succeed to reproduce the problem with a simple piece of code.

[Corne]

The strange thing is that the application does not 'lock up'. Only buttons that respond to the 'onclick' event stop working. If I change these buttons to use the onmousedown event, the problem is gone!

[Kelly Elton]

Not only does .click not fire, things like checkboxes won't check when it enters this state...and in our case it doesn't affect the entire page, just a certain div, so clicking outside of that div will work and will actually resolve the problem.

[Will]

Very strange indeed. Report back if you get anywhere with it! :)

[Kelly Elton]

Well what I've found so far is two things in conjunction seem to cause this...pretty much a mix of creating a child window and moving elements with jquery prepend to MOVE elements, not add them.

[Kelly Elton]

Alright, so I created a jsfiddle that replicates the issue jsfiddle.net/kellyelton/3Lfp60jt/2 ... Here is what you have to do...wait for it to tick, then click an item (which causes a window to pop up)...then wait for it to tick...then try and check the checkbox

[Kelly Elton]

if you bypass the actualy physical click(via debug console, or <a href='javascript:callClickCodeHere'>asdf</a>) it doesn't break...so it's the physical click that's important.

[Kelly Elton]

Another note...it has to be a table and table rows, divs and lists won't cause this issue.

[Kelly Elton]

Alright so the resolution here is, you have to force ms edge to refresh it's view of the table(or probably any other affected element) by setting it to display:none then back to display: previousValue to for it to redraw.

[Su Beng Keong]

hidden input field not working for me, but focusing on an input button which already rendered is working fine, then can solve the stupid edge issue. thx for ur suggestion.

[neptunian]

@MahJinKhai by hidden i meant positioned absolutely and hidden off the viewport.

[supertemp]

Thank you so much! This was driving me crazy. FWIW I was rerendering the content of a table's TBODY when a user clicked different filter buttons. This worked fine, unless you clicked something in the TBODY and then clicked a different filter button (the filter buttons are not in the TBODY), after the html update to the tbody, no clicks would be passed through and you couldn't even press F5 to refresh the page. Using your tip with the display css, fixed this. I actually only had to set it on the TBODY, if that helps anyone. Thanks again, saved me hours.

[atw]

Is it "related to both popping up a child window and rearranging(or modifying) tr's in a table" or should it be "related to both popping up a child window AND/OR rearranging(or modifying) tr's in a table" ?