it-swarm.com.ru

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

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

Кажется, есть метод «[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; потому что он не обрабатывает «целевой» атрибут. Я могу сделать несколько жестких программ, основываясь на значении цели, но я бы тоже хотел этого избежать.

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

45
Sedat Kapanoglu

Вот полный тестовый пример, который имитирует событие 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.

62
Crescent Fresh

ну, вы можете очень быстро проверить отправку кликов через JQuery, как это

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

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

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

Цитируется с https://developer.mozilla.org/en/DOM/element.click

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

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

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

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

11
Chris Shouts

Есть более простой способ достичь этого,

HTML 

<a href="https://getbootstrap.com/" id="fooLinkID" target="_blank">Bootstrap is life !</a>

JavaScript 

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

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

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

6
Gaurav Gandhi

Ни одно из приведенных выше решений не направлено на общее намерение первоначального запроса. Что если мы не знаем идентификатор якоря? Что делать, если у него нет идентификатора? Что если у него даже нет параметра href (например, значок «предыдущий/следующий» в карусели)? Что если мы хотим применить действие к нескольким якорям с разными моделями в независимой манере? Вот пример, который делает что-то вместо щелчка, а затем имитирует щелчок (для любого якоря или другого тега):

var clicker = null;
$('a').click(function(e){ 
    clicker=$(this); // capture the clicked dom object
    /* ... do something ... */
    e.preventDefault(); // prevent original click action
});
clicker[0].click(); // this repeats the original click. [0] is necessary.
0
Vision Hive