JQuery click () on div button doesn't work

Question

I try to imitate the user, click on a site whose code I do not control. The element I'm trying to interact with is a div acting like a button.

<div role="button" class="cTS ab abB ab-Ma oU v2" aria-disabled="false" style="-webkit-user-select: none;" tabindex="0"> Generate </div> 

Event listeners associated with an item (according to the Chrome inspector):

And I'm just trying to click a button using:

 var button = $('.cTS.ab.abB.ab-Ma.oU.v2') button.click() 

... but nothing happens. The selector is valid, which is confirmed by:

 alert($('.cTS.ab.abB.ab-Ma.oU.v2').length); // alerts "1" 

I tried permuting all event handlers

 button.trigger('click'); button.mouseover().mousedown().mouseup() button.trigger('mouseover', function() { button.trigger('mousedown', function() { button.trigger('mouseup'); }); }); 

... but still nothing. How can I simulate a click on this div?

If this is not clear, I try to simulate a click on this div and run the original function, rather than defining a new click function on the element.

UPDATE

Many of these answers do push a button, but do not produce the same result as manually clicking a button. Thus, it seems that the problem is not just clicking the button as such, but emulating a real click.

Answer 1

I did FIDDLE to simulate your button without a click. The blue div has the same eventListeners as in your question. The game ended with the following results:

1) First, take the DOM element:

 var button = document.getElementsByClassName('.cTS.ab.abB.ab-Ma.oU.v2')[0]; 

2) The page does not include jQuery. Thus, all eventListeners are attached by native .addEventListener() . If you use jQuery to fire events, it fires only events that are related to jQuery, but not to native attached events. It means:

 $(button).trigger('mousedown'); // this doesn't work button.dispatchEvent(new Event('mousedown')); // this should work 

3) As Scimonster , it is indicated that the click-eventListener binding is missing. It means:

 $(button).trigger('click'); // doesn't work anyway, see 2) // next works, but has no visible result on the page, // because there is no click-handler to do anything: button.dispatchEvent(new Event('click')); 

4) The click-event fires when a mouse approaches. When mouseup event is used, it looks like a click. In the violin, the mouse makes the red div visible. You can try to trigger a mouseup event by adding this line to your code:

 button.dispatchEvent(new Event('mouseup')); // "works", but has no visible result 

The mouseup handler is "hidden" from mouseover - and mouseout -events, the former attaches it, and the latter deletes it. Thus, the mouse only has a result when the mouse is above the button. I assume your google page does something similar to covering a click event.

5) What you should try:

First, trigger some individual events in your own way:

 button.dispatchEvent(new Event('eventName')); 

If this does not produce any useful results, use some reasonable combination of events:

 button.dispatchEvent(new Event('mouseover')); button.dispatchEvent(new Event('mousedown')); // or: button.dispatchEvent(new Event('mousedown')); button.dispatchEvent(new Event('mouseup')); // or: ..... 

There are many ways to combine events so that one event does nothing, but only the right combination works.

EDIT . According to your invitation to study the source, I found two ways:

1) There are no connected eventListeners in the button itself. The button is wrapped in <a> -tag. This tag is the parent of the button, and its jsaction attribute indicates that <a> has listeners for click , focus and mousedown . Targeting it directly works:

 button.parentElement.dispatchEvent(new Event('click')); 

2) If you want to click on the button itself, you must trigger an event that bubbles on the DOM in order to reach the element with the click handler. But when creating an event with new Event('name') its bubbles -property defaults to false . I thought badly about it. . So, the button works directly:

 button.dispatchEvent(new Event('click', {bubbles: true})); 

EDIT 2 Digging deeper into what is happening on this page brings a useful result:

It was discovered that the page takes care of the position of the mouse pointer and the correct order of events, which allows us to distinguish a person from a robot / script from events. Therefore, this solution uses a MouseEvent - object, which contains the clientX and clientY , which contains the coordinates of the pointer when the event clientY .

The natural click on an element always triggers four events in the given order: mouseover , mousedown , mouseup and click . To simulate natural behavior, mousedown and mouseup delayed. To make it convenient, all steps are wrapped in a function that imitates 1) introduces an element into its upper corner, 2) click a little later in the center of the elements. See comments for more details.

 function simulateClick(elem) { var rect = elem.getBoundingClientRect(), // holds all position- and size-properties of element topEnter = rect.top, leftEnter = rect.left, // coordinates of elements topLeft corner topMid = topEnter + rect.height / 2, leftMid = topEnter + rect.width / 2, // coordinates of elements center ddelay = (rect.height + rect.width) * 2, // delay depends on elements size ducInit = {bubbles: true, clientX: leftMid, clientY: topMid}, // create init object // set up the four events, the first with enter-coordinates, mover = new MouseEvent('mouseover', {bubbles: true, clientX: leftEnter, clientY: topEnter}), // the other with center-coordinates mdown = new MouseEvent('mousedown', ducInit), mup = new MouseEvent('mouseup', ducInit), mclick = new MouseEvent('click', ducInit); // trigger mouseover = enter element at toLeft corner elem.dispatchEvent(mover); // trigger mousedown with delay to simulate move-time to center window.setTimeout(function() {elem.dispatchEvent(mdown)}, ddelay); // trigger mouseup and click with a bit longer delay // to simulate time between pressing/releasing the button window.setTimeout(function() { elem.dispatchEvent(mup); elem.dispatchEvent(mclick); }, ddelay * 1.2); } // now it does the trick: simulateClick(document.querySelector(".cTS.ab.abB.ab-Ma.oU.v2")); 

The function does not simulate a real mouse movement , which is not needed for this task.

Answer 2

$('.cTS.ab.abB.ab-Ma.oU.v2').trigger('click'); performs a task - a click event is triggered.

.trigger (): execute all handlers and behavior associated with the matched elements for this type of event.

http://api.jquery.com/trigger/

 $('.cTS.ab.abB.ab-Ma.oU.v2').on('click', function() { alert( $( this ).text() ); }); $('.cTS.ab.abB.ab-Ma.oU.v2').trigger('click'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div role="button" class="cTS ab abB ab-Ma oU v2" aria-disabled="false" style="-webkit-user-select: none;" tabindex="0"> Generate </div> 

Answer 3

From an image sent by event handlers, click on one of them. Programmatically triggering a click is not the same as doing it naturally. Mouse input / leave / print events do not start here.

Answer 4

I really tried the link you gave and it works. There is no jquery on the page, so you have to execute your own methods.

 var click= document.createEvent("MouseEvents"); click.initMouseEvent("click", true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null); document.getElementsByClassName('cTS ab ab-B')[0].dispatchEvent(click) 

Answer 5

I created JS Fiddle for this and it works great. I used the following

 $('.cTS.ab.abB.ab-Ma.oU.v2').click(function(){ alert("clicked"); }); $('.cTS.ab.abB.ab-Ma.oU.v2').click();// This will trigger click event programatically