To demonstrate how to create a "non-clickable" button, I have developed a FIDDLE. The blue div in the fiddle has similar eventListeners attached as described in the question. Through experimentation, I discovered the following outcomes:
1) Initially, let's select the DOM element:
var button = document.getElementsByClassName('.c-T-S.a-b.a-b-B.a-b-Ma.oU.v2')[0];
2) Since jQuery is not present on the page, all eventListeners are attached using the native .addEventListener() method. Therefore, triggering events using jQuery like $(button).trigger('mousedown') will not work. Instead, use
button.dispatchEvent(new Event('mousedown'))
.
3) It was highlighted by Scimonster that there is no click-eventListener attached. So, attempting $(button).trigger('click') will not work. However, manually triggering the click event with
button.dispatchEvent(new Event('click'))
will technically work, although it may not have a visible impact on the page.
4) The click event is triggered when the mouse button is released. By using the mouseup event, a similar click-like behavior can be achieved. In the fiddle, triggering the mouseup event reveals the red div. You can simulate this by adding the following line to the code:
button.dispatchEvent(new Event('mouseup'));
The mouseup event is influenced by the mouseover and mouseout events, where mouseup only has an effect when the cursor is over the button. This strategy is likely used on your google-page to mimic the click event.
5) Recommended approach:
Initiate single events in a native manner:
button.dispatchEvent(new Event('eventName'));
If single events do not yield desired results, try various combinations of events:
button.dispatchEvent(new Event('mouseover'));
button.dispatchEvent(new Event('mousedown'));
// or:
button.dispatchEvent(new Event('mousedown'));
button.dispatchEvent(new Event('mouseup'));
There are numerous event combinations to ensure specific actions occur only with the right sequence of events.
EDIT: Upon inspecting the source code further, two additional approaches were identified:
1) The button itself lacks eventListeners. Instead, the button is enclosed within an <a> tag, which has listeners for click, focus, and mousedown. This approach can be targeted directly:
button.parentElement.dispatchEvent(new Event('click'));
2) To click the button itself, an event with bubbles: true property is essential. By using
button.dispatchEvent(new Event('click', {bubbles: true}))
, the button itself can be triggered successfully.
EDIT 2: Further investigation unveiled a practical solution:
The page monitors mouse-pointer position and event sequencing to distinguish between human and automated event triggers. Therefore, the method involves leveraging the MouseEvent object, specifically clientX and clientY properties to simulate a natural click event sequence. This process involves a delayed execution of mousedown and mouseup events to emulate a human interaction pattern.
For a natural click, the following sequence is replicated: mouseover, mousedown, mouseup, and click. To achieve this, a function is created to simulate entering the element at the top left corner before clicking at the center. For detailed implementation, refer to the comments in the code snippet.
function simulateClick(elem) {
var rect = elem.getBoundingClientRect(),
topEnter = rect.top,
leftEnter = rect.left,
topMid = topEnter + rect.height / 2,
leftMid = topEnter + rect.width / 2,
ddelay = (rect.height + rect.width) * 2,
ducInit = {bubbles: true, clientX: leftMid, clientY: topMid},
mover = new MouseEvent('mouseover', {bubbles: true, clientX: leftEnter, clientY: topEnter}),
mdown = new MouseEvent('mousedown', ducInit),
mup = new MouseEvent('mouseup', ducInit),
mclick = new MouseEvent('click', ducInit);
elem.dispatchEvent(mover);
window.setTimeout(function() {elem.dispatchEvent(mdown)}, ddelay);
window.setTimeout(function() {
elem.dispatchEvent(mup); elem.dispatchEvent(mclick);
}, ddelay * 1.2);
}
simulateClick(document.querySelector(".c-T-S.a-b.a-b-B.a-b-Ma.oU.v2"));
Note that this function does not simulate actual mouse movement as it is unnecessary for the intended task.