Как я могу вызвать клик по событию JavaScript

216

У меня есть гиперссылка на моей странице. Я пытаюсь автоматизировать количество нажатий на гиперссылку в целях тестирования. Можно ли имитировать 50 кликов по гиперссылке с помощью JavaScript?

<a href="#" target="_blank" onclick="javascript:Test("Test");">MSDN</a>

Я ищу триггер события onClick из JavaScript.

user171523
источник

Ответы:

285

Выполнение одного клика на элементе HTML: просто сделайте element.click(). Большинство основных браузеров поддерживают это .


Чтобы повторить щелчок более одного раза: добавьте идентификатор к элементу, чтобы выбрать его уникальным образом:

<a href="#" target="_blank" id="my-link" onclick="javascript:Test('Test');">Google Chrome</a>

и вызовите .click()метод в вашем коде JavaScript через цикл for:

var link = document.getElementById('my-link');
for(var i = 0; i < 50; i++)
   link.click();
пример меня
источник
1
NB это для быстрого тестирования. Более надежное, совместимое со стандартами кросс-браузерное решение см. В ответе Хуана.
экземпляр меня
3
Я не понимаю петлю, и это не работает на мобильном телефоне.
im_benton
@im_benton: цикл был для конкретных потребностей ОП. Если вам просто нужно вызвать событие нажатия, вы можете опустить строку, которая начинается с for(.
Риного
87

ОБНОВИТЬ

Это был старый ответ. В настоящее время вы должны просто использовать клик . Для более продвинутого запуска событий используйте dispatchEvent .

const body = document.body;

body.addEventListener('click', e => {
  console.log('clicked body');
});

console.log('Using click()');
body.click();

console.log('Using dispatchEvent');
body.dispatchEvent(new Event('click'));

Оригинальный ответ

Вот что я использую: http://jsfiddle.net/mendesjuan/rHMCy/4/

Обновлено для работы с IE9 +

/**
 * Fire an event handler to the specified node. Event handlers can detect that the event was fired programatically
 * by testing for a 'synthetic=true' property on the event object
 * @param {HTMLNode} node The node to fire the event handler on.
 * @param {String} eventName The name of the event without the "on" (e.g., "focus")
 */
function fireEvent(node, eventName) {
    // Make sure we use the ownerDocument from the provided node to avoid cross-window problems
    var doc;
    if (node.ownerDocument) {
        doc = node.ownerDocument;
    } else if (node.nodeType == 9){
        // the node may be the document itself, nodeType 9 = DOCUMENT_NODE
        doc = node;
    } else {
        throw new Error("Invalid node passed to fireEvent: " + node.id);
    }

     if (node.dispatchEvent) {
        // Gecko-style approach (now the standard) takes more work
        var eventClass = "";

        // Different events have different event classes.
        // If this switch statement can't map an eventName to an eventClass,
        // the event firing is going to fail.
        switch (eventName) {
            case "click": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead.
            case "mousedown":
            case "mouseup":
                eventClass = "MouseEvents";
                break;

            case "focus":
            case "change":
            case "blur":
            case "select":
                eventClass = "HTMLEvents";
                break;

            default:
                throw "fireEvent: Couldn't find an event class for event '" + eventName + "'.";
                break;
        }
        var event = doc.createEvent(eventClass);
        event.initEvent(eventName, true, true); // All events created as bubbling and cancelable.

        event.synthetic = true; // allow detection of synthetic events
        // The second parameter says go ahead with the default action
        node.dispatchEvent(event, true);
    } else  if (node.fireEvent) {
        // IE-old school style, you can drop this if you don't need to support IE8 and lower
        var event = doc.createEventObject();
        event.synthetic = true; // allow detection of synthetic events
        node.fireEvent("on" + eventName, event);
    }
};

Обратите внимание, что вызов fireEvent(inputField, 'change');не означает, что он фактически изменит поле ввода. Типичный вариант использования для input.value="Something"запуска события изменения - когда вы устанавливаете поле программно и хотите, чтобы вызывались обработчики событий, так как вызов не вызовет событие изменения.

Хуан Мендес
источник
Привет, Хуан! Ваш пример не определяет JSUtil.NodeTypes.DOCUMENT_NODE
Като
Я знаю, что вопрос касается событий щелчков, но вы предоставили здесь некоторый общий код, и я вижу, что события изменений не будут запущены (я проверял это, и это действительно не работает для таких событий). Для запуска событий изменения мне пришлось использовать функцию запуска jquery.
Александр Лех
@AleksanderLech Просто запуск события не гарантирует, что действие будет иметь место. Это для щелчка, это не для изменения. Вариант использования для событий, где изменение не работает, - это когда вы хотите внести изменение в его значение, но вы хотите, чтобы вызывались все обработчики событий изменения (независимо от того, были они установлены jQueryили нет). Я могу оказать более значимую помощь, если вы зададите новый вопрос с точным кодом, который вы пытались, но не работали.
Хуан Мендес
Спасибо за быстрый ответ. Мне удалось запустить событие change после нескольких изменений в вашем фрагменте: 1) var node = document.getElementById (originalEvent.srcElement.id); 2) event.initEvent (eventName, true, true); // Я не знаю, почему вы отключили всплывающее окно для событий изменения. Пожалуйста, скажите мне, что вы думаете.
Александр Лех
40

какой

 l.onclick();

делает точно вызов onclickфункции l, то есть, если вы установили один с l.onclick = myFunction;. Если вы не установили l.onclick, это ничего не делает. Напротив,

 l.click();

имитирует щелчок и запускает все обработчики событий, независимо от того, были ли они добавлены l.addEventHandler('click', myFunction);, в HTML или любым другим способом.

黄 雨伞
источник
1
FWIW это работает только на уровне элемента. Если вы добавите событие click к windowобъекту, он не будет волшебным образом представлять window.clickфункцию.
Джеймс Доннелли
20

Мне очень стыдно, что существует так много неправильных или нераскрытых частичных применений.

Самый простой способ сделать это через Chrome или Opera (в моих примерах будет использоваться Chrome) с помощью консоли. Введите в консоль следующий код (обычно в 1 строку):

var l = document.getElementById('testLink');
for(var i=0; i<5; i++){
  l.click();
}

Это сгенерирует требуемый результат

htmldrum
источник
12

.click()не работает с Android (посмотрите документацию Mozilla , раздел для мобильных устройств). Вы можете вызвать событие click с помощью этого метода:

function fireClick(node){
    if (document.createEvent) {
        var evt = document.createEvent('MouseEvents');
        evt.initEvent('click', true, false);
        node.dispatchEvent(evt);    
    } else if (document.createEventObject) {
        node.fireEvent('onclick') ; 
    } else if (typeof node.onclick == 'function') {
        node.onclick(); 
    }
}

Из этого поста

Маноло
источник
1
Я пытался щелкнуть по триггеру jQuery, но обнаружил, что он вызывает обратный вызов, а не отправляет фактическое событие в DOM. @ Manolo ваш метод правильный.
Акшай Гундевар
« .click()не работает с Android» На самом деле, в последней таблице написано «Совместимость неизвестна».
Гауранг Тандон
8

Используйте рамки тестирования

Это может быть полезно - http://seleniumhq.org/ - Selenium - это система автоматического тестирования веб-приложений.

Вы можете создавать тесты с помощью плагина Firefox Selenium IDE

Ручное срабатывание событий

Чтобы вручную пожары правильного пути вам нужно будет использовать различные методы для различных браузеров - либо el.dispatchEventили el.fireEventгде elбудет ваш элемент Anchor. Я полагаю, что оба из них потребуют создания объекта Event для передачи.

Альтернативный, не совсем правильный, быстрый и грязный способ был бы следующим:

var el = document.getElementById('anchorelementid');
el.onclick(); // Not entirely correct because your event handler will be called
              // without an Event object parameter.
Николь
источник
7

IE9 +

function triggerEvent(el, type){
    var e = document.createEvent('HTMLEvents');
    e.initEvent(type, false, true);
    el.dispatchEvent(e);
}

Пример использования:

var el = document.querySelector('input[type="text"]');
triggerEvent(el, 'mousedown');

Источник: https://plainjs.com/javascript/events/trigger-an-event-11/

Фатих Хайриоглу
источник
1

Честное предупреждение:

element.onclick()не ведет себя так, как ожидалось. Он только запускает код внутри onclick="" attribute, но не запускает поведение по умолчанию.

У меня была похожая проблема с переключателем, не установившим флажок, чтобы проверить, хотя onclickпользовательская функция работала нормально. Пришлось добавить, radio.checked = "true";чтобы установить его. Вероятно, то же самое относится и к другим элементам (после того, a.onclick()как должно быть также window.location.href = "url";)

Arvigeus
источник
В самом деле, использование onclick()означает, что eventобъект не будет автоматически определяться браузером, поэтому общие методы, такие как event.stopPropagation(), также не будут определены.
Вооз
0

Пожалуйста, вызовите функцию триггера в любом месте и нажмите кнопку.


<a href="#" id="myBtn" title="" >Button click </a>

function trigger(){
    document.getElementById("myBtn").click();
}
Винод Кумар
источник