WedX - журнал о программировании и компьютерных науках

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

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

Кажется, существует метод «[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, но я не уверен, насколько хорошо он обрабатывает целевое свойство, так как раньше я с ним не работал.

javascript html dom
14.09.2009

Ответы:


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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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 объект. Уровень 2 DOM не определяет такую ​​глобальную переменную, поэтому симулятор должен передать свою локальную копию event.

14.09.2009
  • Обновление: на данный момент initMouseEvent устарел, см. https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent вместо этого используйте пользовательские события https://developer.mozilla.org/en-US/docs/Web/.Руководство/События/Creating_and_triggering_events 22.08.2016

    • 2

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

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

    DOM, не относящиеся к Gecko, могут вести себя иначе.

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

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

    14.09.2009

    3

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

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

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

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

    4

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

    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.

    11.04.2017
  • это не работает для меня. Ожидается увидеть новое окно браузера, запущенное по таймауту, но ничего не получаю. 11.03.2020
  • @TSmith, с помощью только HTML вы не можете этого сделать, подробнее здесь (stackoverflow.com/questions/12939928/) 12.03.2020

    • 5

    Ни одно из вышеперечисленных решений не затрагивает общий смысл исходного запроса. Что делать, если мы не знаем идентификатор якоря? Что делать, если у него нет идентификатора? Что, если у него даже нет параметра 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.
    12.06.2018
    Новые материалы
    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Для любых предложений по сайту: [email protected]