Андрей Мотошин Front-end engineer

Обновляя свой сайт, просматривал его в разных браузерах на разных устройствах. Всплывали небольшие баги, вроде отсутствия поддержки какого-то CSS3 свойства.

Но одна ошибка меня очень удивила: на iPad`е клик по элементу label не заставлял привязанный к нему радио-баттон изменить свое состояние. В процессе поиска решения этой проблемы, нашлась страница блога с несколькими вариантами:

1. В самом посте была громоздкая избыточная запись, которая мне сразу не понравилась. Я попробовал ее использовать, и это дало положительный результат, но решено было искать что-то другое.
2. В комментариях предлагалось использовать label { сursor: pointer } — я надеялся, что это простое правило мне поможет, но нет, оно уже было у меня прописано раньше, а ошибка присутствовала.
3. Еще в комментариях говорили, что можно попробовать написать $('label').click(function(){}); Однако, я избавился от jQuery и ради одного багофикса его возвращаться не собирался.

В итоге, решил написать то же самое, что и в третьем пункте, только на нативном javascript, плюс кое-что взяв из первого. Получился вот такой код:

function fixForIpad(){

  if (!navigator.userAgent.match(/iPhone|iPod|iPad/i)) {
    return;
  }

  var labels = document.getElementsByTagName('label');

  for (var i = labels.length; i--;) {
    labels[i].onclick = function(){};
  }

}

Сначала мы проверяем, нужное ли нам попалось устройство, чтобы не выполнять код там, где нет ошибки. А затем выбираем все лейблы на странице и просим их выполнять пустую функцию при клике.

Можно было бы, наверное, ловить все клики на документе и там проверять, по лейблу ли кликали, но таких элемента у меня всего 2 и подобная оптимизация ни к чему.