Как смоделировать клик с помощью JavaScript?


293

Мне просто интересно, как я могу использовать JavaScript для имитации нажатия на элемент.

В настоящее время у меня есть:

<script type="text/javascript">
function simulateClick(control)
{
    if (document.all)
    {
        control.click();
    }
    else
    {
        var evObj = document.createEvent('MouseEvents');
        evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );
        control.dispatchEvent(evObj);
    }
}
</script>

<a href="http://www.google.com" id="mytest1">test 1</a><br>

<script type="text/javascript">
    simulateClick(document.getElementById('mytest1'));
</script>

Но это не работает :(

Любые идеи?


9
«Пять самых распространенных ошибок кодирования»: javascript.about.com/od/hintsandtips/a/worst_4.htm - Почти никто не запускает IE4 больше, поэтому поддержка document.all DOM больше не требуется. Это действительно удивительно, однако, сколько людей все еще используют это в своем кодировании. Хуже того, что поддержка document.all DOM часто проверяется, чтобы определить используемый браузер, и если он поддерживается, то в коде предполагается, что браузер Internet Explorer (что совершенно неверно, поскольку Opera также распознает этот DOM). ,
Zaf

Ответы:


418

Вот что я приготовил. Это довольно просто, но работает:

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
  }
}

Использование:

eventFire(document.getElementById('mytest1'), 'click');

12
@Anderson Green: я добавил пример к этому jsfiddle: jsfiddle.net/KooiInc/W4BHD
KooiInc

4
Доказательство того, что это работает (в Chromium): +1 с document.querySelector('[value="2706236"]').nextSibling.nextSibling.dispatchEvent(ev);:)
PointedEars

58
Ну, я попробовал ваш java-скрипт на кнопке голосования вверх :) (работал конечно)
0

1
Чтобы смоделировать точное поведение пользователя, вы должны заключить вызовы dispatchEventили в , так как кажется, что это синхронно . clicksetTimeoutdispatchEvent
Лев Казаков

16
Event.initEventв настоящее время устарела developer.mozilla.org/en/docs/Web/API/Event/initEvent
artnikpro

395

Как насчет чего-то простого:

document.getElementById('elementID').click();

Поддерживается даже IE.


@HermannIngjaldsson Да, он отлично работает в IE - msdn.microsoft.com/en-us/library/ie/ms536363%28v=vs.85%29.aspx
Даррен Суини

6
Вопрос был в том, "работает ли он в том числе?" - ответ да - AFAIK по крайней мере до 8, не проверял 7
Даррен Суини

24
Разве этого не было раньше? Почему в ответах 2010 года не упоминается это простое решение? Просто любопытно ...
Parth

3
@ NinoŠkopac Отлично работает в настоящее время для настольных компьютеров, но не гарантирует работу с мобильными браузерами. Даже сайт разработчика Mozilla не показывает мобильную поддержку.
le0diaz

8
@Parth Может быть, это так, просто не щелкнуло для них.
Андрей

78

Рассматривали ли вы использование jQuery, чтобы избежать обнаружения всех браузеров? С jQuery это было бы так просто:

$("#mytest1").click();

21
Это только запускает обработчики событий jQuery, а не поведение по умолчанию (в этом случае браузер переходит на href)
Ромуальд Брюне

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

9
@ErikAigner: Мне было интересно то же самое, но я рад, что принятый ответ в этом случае - простой JavaScript, а не jQuery. Видел это слишком много раз на SO. Еще раз: jQuery - это JavaScript, но JavaScript - это не jQuery. Хотя мне нравится использовать jQuery, я все больше и больше вижу, что разработчики не понимают по-настоящему ничего. Мои 2 цента, не могли удержаться от комментариев. ;)
Сандер

58
Есть также много людей, которые не знали бы, с чего начать, если бы им приходилось стирать одежду вручную, так как большинство домохозяйств имеют стиральную машину, и почти столько же людей имеют сушилку для одежды. jQuery, так же как и современные приборы, значительно упростили старую работу и стали менее подвержены ошибкам. Однако это решение не для всех, но отрицательный ответ, который точно отвечает на вопрос с использованием более краткого и понятного синтаксиса и совместимости с различными браузерами, кажется обратным. +1.
FreeAsInBeer

2
@FreeAsInBeer Тогда вам также не следует никуда ходить, потому что вождение намного проще. Но мы знаем, что это глупо. Вы идете, если вам не нужно далеко ходить. Вы используете простой JavaScript, если вам нужно сделать что-то простое и не хотите загружать целую библиотеку, чтобы сделать это. Не нужно тратить газ / энергию на что-то простое.
Джейкоб Альварес

18
var elem = document.getElementById('mytest1');

// Simulate clicking on the specified element.
triggerEvent( elem, 'click' );

/**
 * Trigger the specified event on the specified element.
 * @param  {Object} elem  the target element.
 * @param  {String} event the type of the event (e.g. 'click').
 */
function triggerEvent( elem, event ) {
  var clickEvent = new Event( event ); // Create the event.
  elem.dispatchEvent( clickEvent );    // Dispatch the event.
}

Ссылка


Я считаю, что это должен быть лучший ответ в настоящее время
DavidTaubmann

15

Вы можете сэкономить кучу места, используя jQuery. Вам нужно только использовать:

$('#myElement').trigger("click")

10
ОП попросил JavaScript. Хотя это компактно и функционально, некоторые люди предпочитают JS без библиотек, а не jQuery.
Тушка

43
Экономия места за счет загрузки jquery?
MH

9
Некоторые люди также предпочитают сборку.
Дэн Ниссенбаум

@ М.Х. Я думаю, что более веским аргументом будет «чтобы все было просто». Ваш профиль по умолчанию в SO примерно такого же размера, как jQuery.
adelriosantiago

7

Лучший ответ - лучший! Тем не менее, это не вызывало события мыши для меня в Firefox, когда etype = 'click'.

Таким образом, я изменил document.createEventк 'MouseEvents'и исправил проблему. Дополнительный код предназначен для проверки того, не вмешивался ли другой бит кода в событие, и в случае его отмены я записывал это на консоль.

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('MouseEvents');
    evObj.initEvent(etype, true, false);
    var canceled = !el.dispatchEvent(evObj);
    if (canceled) {
      // A handler called preventDefault.
      console.log("automatic click canceled");
    } else {
      // None of the handlers called preventDefault.
    } 
  }
}

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.