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?

Code would be helpful; a live demo would be even better. I would suggest you record a performance sample in the F12 Developer Tools. You may identify a run-away script that is locking things up. — Sampson, Nov 04 '15 at 16:31
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, Nov 06 '15 at 09:20
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! — Corne, Nov 06 '15 at 14:20
Did you ever find a solution to this? I'm having the same problem. — Will, Nov 25 '15 at 21:05
Thank you for asking this question. It's hard to search for something that seems so vague but is actually a very specific problem that is not due to badly-written JavaScript. It's not the first time a Microsoft browser has contained a bug like this; I once had an app repeatedly crash IE9 outright after a particular sequence of DOM manipulation. — Tim M., May 05 '16 at 01:03
And in 2020 still the same problem exist. Microsoft is such a pain ... don't how this thing even exist. — Toma Tomov, Feb 11 '20 at 19:07

score 7 · Answer 1 · answered Dec 01 '15 at 00:58

7

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!

answered Dec 01 '15 at 00:58

Will

24,082
14
97
108

1

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. – Kelly Elton Dec 08 '15 at 19:10
Very strange indeed. Report back if you get anywhere with it! :) – Will Dec 08 '15 at 20:51
1

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 Dec 08 '15 at 21:57
1

Alright, so I created a jsfiddle that replicates the issue http://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 Dec 08 '15 at 22:25
if you bypass the actualy physical click(via debug console, or `asdf`) it doesn't break...so it's the physical click that's important. – Kelly Elton Dec 08 '15 at 23:20
Another note...it has to be a table and table rows, divs and lists won't cause this issue. – Kelly Elton Dec 09 '15 at 14:15
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. – Kelly Elton Dec 09 '15 at 16:05

score 5 · Answer 2 · answered Dec 09 '15 at 16:43

5

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.

answered Dec 09 '15 at 16:43

Kelly Elton

4,373
10
53
97

1

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. – supertemp Apr 07 '16 at 00:32
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" ? – atw Jan 11 '17 at 10:56

score 2 · Answer 3 · answered Mar 09 '16 at 17:55

2

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

answered Mar 09 '16 at 17:55

neptunian

410
4
17

1

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. – Su Beng Keong Apr 05 '16 at 03:42
@MahJinKhai by hidden i meant positioned absolutely and hidden off the viewport. – neptunian Apr 06 '16 at 21:37

score 1 · Answer 4 · answered May 10 '16 at 11:49

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

Microsoft Edge: onclick event stops working?

4 Answers4

Linked