Як імітувати клацання за допомогою JavaScript?


292

Мені просто цікаво, як я можу використовувати 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 і тому підтримка документа.all DOM більше не потрібна. Це дійсно дивно, але скільки людей все ще використовують його в кодуванні. Гірше те, що підтримка document.all DOM часто перевіряється для визначення браузера, який використовується, і якщо він підтримується, код передбачає, що браузер є Internet Explorer (що є абсолютно неправильним використанням, оскільки Opera також визнає, що DOM) .
заф

Відповіді:


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);:)
Наказуєшся

58
Ну а я спробував ваш Java-скрипт на кнопці голосування :) (працював звичайно)
0fnt

1
Щоб імітувати точну поведінку користувача, слід обернути dispatchEventабо clickвиклики setTimeout, оскільки, здається, dispatchEventце синхронно .
Лев Казаков

16
Event.initEventтепер застарілий developer.mozilla.org/en/docs/Web/API/Event/initEvent
artnikpro

393

Як щодо чогось такого простого:

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

Підтримується навіть IE.


@HermannIngjaldsson Так, він ідеально працює в IE - msdn.microsoft.com/en-us/library/ie/ms536363%28v=vs.85%29.aspx
Даррен

6
Питання було "чи працює це, тобто?" - відповідь "так" - AFAIK принаймні до 8, не перевірив 7
Darren Sweeney

24
Хіба цього раніше не існувало? Чому відповіді 2010 року не згадували про це просте рішення? Просто цікаво ...
Parth

3
@ NinoŠkopac Зараз чудово працює на робочому столі, але не гарантує роботи з мобільними браузерами. Навіть сайт розробника mozilla не підтримує мобільну підтримку.
le0diaz

8
@Parth Може бути , це зробив, він просто не натиснути на них.
Андрій

78

Чи вирішили ви використовувати jQuery, щоб уникнути виявлення всіх браузерів? З jQuery це було б так просто, як:

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

21
Цей єдиний обробник подій jQuery, а не поведінка за замовчуванням (браузер переходить до href у такому випадку)
Romuald Brunet

12
Я не знаю про сумні, але, безумовно, це може бути зручно, щоб не потрібно постійно повторювати одне і те ж підпрограми виявлення браузера.
БредБренінг

9
@ErikAigner: Мені було цікаво те саме, але радий, що прийнята відповідь у цьому випадку - це звичайний JavaScript, а не jQuery. Бачив це занадто багато разів на ТАК. Ще раз: 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
OP попросив JavaScript. Хоча це компактно і функціонально, деякі люди віддають перевагу JS-файлу JBuery без бібліотеки.
Каркас

43
Економте місце, завантаживши jquery?
MH

9
Деякі люди також віддають перевагу збірці.
Dan Nissenbaum

@MH Я думаю, що більш вагомим аргументом було б "зробити це просто". Ваш профіль за замовчуванням тут у 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.