Javascript click() 对某些元素不起作用

Question

I want to write some automation to website. Simply filling in forms and simulating clicks on elements. But for some elements JavaScript function click() doesn't work. For example it is on this page: http://www1.plus.pl/bsm/ If I do click() on "Wyślij" button, nothing happens. It is my command:

document.getElementsByClassName('tab-button')[0].click()

What is wrong? Why on other elements this function works?

Answer 1

With yours help I found the solution:

var evt = document.createEvent('MouseEvents')
evt.initMouseEvent('mousedown', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
document.querySelectorAll('.tab-button')[0].dispatchEvent(evt)

Notice that it should be mousedown event rather than click . Some sites are done in a different way than others. Another important thing is 3rd parameter. It should be set to false (in this particular case). It sets cancelable value. Without this set to false it doesn't work.

Thank you for all answers!

Answer 2

document.getElementsByClassName('tab-button')[0].dispatchEvent(event)

or

document.getElementsByClassName('tab-button')[0].fireEvent(event)

is the way you could do it... but trying it on the site, the 'click' event isn't bound to that element

EDITED See How to trigger event in JavaScript?

Answer 3

I would suspect that it is because the browser you are testing on has no native support for .getElementsByClassName . Try using document.querySelectorAll instead, or assign your element an ID and use document.getElementById . Eg:

var btn = document.querySelectorAll("tab-button")[0];
btn.click();

Answer 4

It seems like some elements need dispatchEvent() , and others need a plain click() . To build on gumik's answer (thanks!), here's my copy-pasta for quick-and-dirty Javascript automation that just needs to click things:

function click(node) {
  var evt = document.createEvent('MouseEvents');
  evt.initMouseEvent('mousedown', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  node.dispatchEvent(evt);
  
  node.click();
}

Usage:

var button = document.querySelector(".somecssclassname");
click(button);

Answer 5

您在Loaded body标签后是否执行此操作，如果某些元素未单击，则可能是由于脚本运行时它们未加载到 DOM 中。