Сегодня мы поговорим о том, как имитировать клик по ссылке при определенном событии. Задача на первый взгляд кажется простой, но имеются некоторые "подводные камни", которые мы сейчас и рассмотрим.
Например, на странице имеется 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();
});