Имитация клика по ссылке с помощью jQuery

Сегодня мы поговорим о том, как имитировать клик по ссылке при определенном событии. Задача на первый взгляд кажется простой, но имеются некоторые "подводные камни", которые мы сейчас и рассмотрим.

Например, на странице имеется 2 ссылки:

<a id="link-1" href="url-1">Link 1</a>
<a id="link-2" href="url-2">Link 2</a>

Задача: при клике по ссылке 1, сделать клик по ссылке 2 таким образом, что бы переход осуществился на урл ссылки 2. Первое, что приходит в голову, это следующий код:

$('#link-1').on('click', function(e) {
  console.log('link 1 clicked');
  $('#link-2').click();
  e.preventDefault();
});
$('#link-2').on('click', function(e) {
  console.log('link 2 clicked');
});

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

$('#link-1').on('click', function(e) {
  $('#link-2')[0].click();
  e.preventDefault();
});

Уже лучше, код работает и происходит переход по ссылке 2 во всех популярных браузерах, но каково же было мое удивление, когда оказалось, что он нерабочий в Safari, что бы исправить проблему, модифицируем код:

$('#link-1').on('click', function(e) {
  var link = $('#link-2')[0];
  var linkEvent = document.createEvent('MouseEvents');
  linkEvent.initEvent('click', true, true);
  link.dispatchEvent(linkEvent);
  e.preventDefault();
});

Теперь код работает во всех популярных браузерах, но мои страдания на этом не закончились. Так уж оказалось, что проект с которым я работаю, должен работать в ie7/8, поэтому мне пришлось переписать еще раз код и финальная его версия выглядит так:

$('#link-1').on('click', function(e) {
  var link = $('#link-2')[0];
  var linkEvent = null;
  if (document.createEvent) {
    linkEvent = document.createEvent('MouseEvents');
    linkEvent.initEvent('click', true, true);
    link.dispatchEvent(linkEvent);
  }
  else if (document.createEventObject) {
    linkEvent = document.createEventObject();
    link.fireEvent('onclick', linkEvent);
  }

  e.preventDefault();
});

Комментарии (7)

Аватар пользователя Benya
Benya

Возможно, у меня нет мака и в нем я не тестировал, но на сколько я знаю, там версия более поздняя чем под Windows, поэтому в последних версиях вполне вероятно было исправлено. Я тестировал в Safari 5.1.7 for Windows

Аватар пользователя Андрей
Андрей

имха) так по идее тоже будет везде работать, в ие не проверял)

$('#link-1').on('click', function(e) {
  window.location.href = $('#link-2').attr('href');
  e.preventDefault();
});
Аватар пользователя Benya
Benya

Будет, но я переход по ссылке использовал как пример. Речь вообще идет о том, что бы сделать полноценный клик по элементу

Аватар пользователя xandeadx
xandeadx

уууу, safari под виндовс уже третий год как не выпускается

Аватар пользователя Benya
Benya

не особо следил за ним, но требования в поддержке этого браузера есть в том числе и под виндой :(

Аватар пользователя Никита
Никита

Это именно то, что нужно. Вы - мозг! Всё работает. Спасибо.