Microsoft Edge: событие onclick перестает работать?

У меня странные проблемы с моим (ASP.NET) веб-приложением в Microsoft Edge.

В какой-то момент событие onclick перестает работать. Все кнопки на странице, которые реагируют на событие onclick, перестают работать. На той же странице есть несколько кнопок, которые реагируют на событие onmousedown, и они продолжают работать.

Если я обновляю страницу, проблема исчезнет. В консоли нет ошибок. У меня нет этой проблемы с другими браузерами (включая IE11 под Windows 10).

У вас возникли подобные проблемы?

Ответ 1

Это ошибка в Edge.

Что я нашел, так это то, что оно связано с появлением дочернего окна и перестановкой (или модификацией) tr в таблице.

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

Чтобы исправить это, вам нужно заставить таблицу перерисовать. Вы можете сделать это, установив отображение: none перед изменением таблицы, а затем установив отображение: previousValue после его изменения.

Надеюсь, что это поможет.

Ответ 2

Это не полный ответ, так как он не учитывает, почему события click не работают, но я чувствую, что он принадлежит здесь, так как мы с моей командой безнадежно застряли, пытаясь найти ответ на этот вопрос. Кажется, это ошибка в Edge, и каждый обходной путь, который мы пробовали, не удался, пока я не наткнулся на комментарий @Come выше.

Решение заключалось в том, чтобы изменить все наши события click на события mouseup, эмулируя одно и то же поведение. По какой-то причине mouseup был запущен, даже когда click не был. mousedown работает, но mouseup более эмулирует click.

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

// ...

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

Надеюсь, это поможет кому-то!

Ответ 3

Мое решение состояло в том, чтобы создать "скрытый" элемент ввода и вызвать фокус на нем, который волшебным образом возвращает клики.

Ответ 4

В моем случае удаление дочерних элементов приводит к этой проблеме. Поэтому, когда я удаляю элемент (включая замену DOM на innerHTML), я делаю style.display = "none" для элемента перед удалением. Это решает проблему.

Например, я использую эту функцию

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

вместо

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