Как я могу имитировать щелчок на теге привязки?

Я хочу, чтобы имитировать щелчок на привязном теге со всеми дополнительными функциями, такими как правильная обработка цели.

Кажется, существует метод [click()] [3] для объекта привязки DOM, но не все браузеры поддерживают это. Firefox вызывает эту ошибку:

Ошибка: anchorObj.click не является функцией

Он также работает странно на Opera 10 и Konqueror, вызывая бесконечные клики, когда он вызывает внутри onclick-обработчик окружающего div. Думаю, только IE8 отлично справляется с этим. Во всяком случае, я не хочу этого, поскольку у основных браузеров в основном возникают проблемы с ним.

Я нашел это альтернативное решение для Firefox на форумах Mozilla:

var evt = document.createEvent("MouseEvents"); 
evt.initMouseEvent("click", true, true, window, 
    0, 0, 0, 0, 0, false, false, false, false, 0, null); 
anchorObj.dispatchEvent(evt);

Это кажется слишком уродливым и громоздким для меня. Я не знаю, насколько это совместимо, и я хочу как можно больше не писать код браузера.

Я не могу использовать location.href= anchorObj.href; потому что он не обрабатывает атрибут "target". Я могу сделать некоторое жесткое кодирование на основе целевого значения, но я бы тоже хотел этого избежать.

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

Ответы

Ответ 1

Вот полный тестовый пример, который имитирует событие click, вызывает привязку всех обработчиков (однако они были прикреплены), поддерживает атрибут "target" ("srcElement" в IE), пузыри, подобные нормальному событию, и эмулирует предотвращение рекурсии IE. Протестировано в FF 2, Chrome 2.0, Opera 9.10 и, конечно, IE (6):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function fakeClick(event, anchorObj) {
  if (anchorObj.click) {
    anchorObj.click()
  } else if(document.createEvent) {
    if(event.target !== anchorObj) {
      var evt = document.createEvent("MouseEvents"); 
      evt.initMouseEvent("click", true, true, window, 
          0, 0, 0, 0, 0, false, false, false, false, 0, null); 
      var allowDefault = anchorObj.dispatchEvent(evt);
      // you can check allowDefault for false to see if
      // any handler called evt.preventDefault().
      // Firefox will *not* redirect to anchorObj.href
      // for you. However every other browser will.
    }
  }
}
</script>
</head>
<body>

<div onclick="alert('Container clicked')">
  <a id="link" href="#" onclick="alert((event.target || event.srcElement).innerHTML)">Normal link</a>
</div>

<button type="button" onclick="fakeClick(event, document.getElementById('link'))">
  Fake Click on Normal Link
</button>

<br /><br />

<div onclick="alert('Container clicked')">
    <div onclick="fakeClick(event, this.getElementsByTagName('a')[0])"><a id="link2" href="#" onclick="alert('foo')">Embedded Link</a></div>
</div>

<button type="button" onclick="fakeClick(event, document.getElementById('link2'))">Fake Click on Embedded Link</button>

</body>
</html>

Демо здесь.

Он избегает рекурсии в браузерах, отличных от IE, путем проверки объекта события, который инициирует имитированный клик, путем проверки атрибута target события (который остается неизменным во время распространения).

Очевидно, что IE делает это внутренне, ссылаясь на свой глобальный объект event. Уровень DOM 2 не определяет такую глобальную переменную, поэтому по этой причине симулятор должен пройти в своей локальной копии event.

Ответ 2

Хорошо, вы можете очень быстро протестировать отправку кликов с помощью jQuery так

$('#link-id').click();

Если у вас по-прежнему возникают проблемы с кликом по отношению к цели, вы всегда можете сделать это

$('#link-id').click( function( event, anchor )
{
  window.open( anchor.href, anchor.target, '' );
  event.preventDefault();
  return false;
});

Ответ 3

Цитата из https://developer.mozilla.org/en/DOM/element.click

Метод click предназначен для использования с элементами INPUT кнопки типа, флажок, радио, reset или отправить. Gecko не реализует метод click для других элементов, от которых можно было бы реагировать на щелчки мышью, такие как ссылки (элементы A), и не обязательно запускать событие click других элементов.

DOM Non-Gecko могут вести себя по-разному.

К сожалению, похоже, что вы уже нашли лучшее решение своей проблемы.

В качестве побочного примечания я согласен с тем, что ваше решение кажется менее идеальным, но если вы инкапсулируете функциональность внутри метода (как это делал JQuery), это не так уж плохо.

Ответ 4

Существует более простой способ добиться этого,

HTML

<a href="#" onclick="location.href='https://getbootstrap.com/'; return false;" id="fooLinkID" target="_blank">Bootstrap is life !</a>

JavaScript

// Simulating click after 3 seconds
setTimeout(function(){
  document.getElementById('fooLinkID').click();
}, 3 * 1000);

Использование простого javascript для имитации щелчка вместе с адресацией целевого свойства.

Вы можете проверить рабочий пример здесь на jsFiddle.