Why click() method does not trigger behaviour while actual clicking does? - javascript

I'm trying to programmatically click the "listen" button on a Google Translate page (https://translate.google.com/#en/es/javascript)
For some reason this code does not produce a sound:
document.getElementById('gt-src-listen').click()
while actual clicking on the button does.
Why these two are not identical and how can I programmatically emulate a click in this case?

If you are using vanilla javascript I think the event you are trying to use is onclick, You can see the difference between the both of them in this SO answer What's the difference between "click" and "onclick" when creating an element with jQuery?

Related

Emulate physical click in Jquery or Javascript

I am trying to programmatically trigger a click on a wordpress page on a <a href="#"... tag which after clicked shows a div with all categories... (the div is not hidden it gets created after clicking the button)
When trying to find the click event behind this element on chrome debugger DOM in event listeners the only event attached
to this element is flatsome.js?ver=3.12.1:109
the handler is f(t) ............
using jQuery Audit, I can see the handler definition, then there are many functions like !function(t)... because it is minified.
I tried to use jQuery click, mouseup, mousedown events (also with trigger('click...') ) with no success, it gets the object, doesn't show an error, but never shows the filter menu.
Is there a way to just emulate the physical click as if it was done with the mouse? then I wouldn't need to call the function, I can't seem to find what function is behind the click event...
Thank you in advance
Dario
Have you tried the following code?
Using jQuery:
$('your-query-selector').trigger('click');
Using JavaScript:
document.querySelector('your-query-selector').click();

React onClick event suppressed while dropdown is open

I have created a codesandbox to demonstrate the problem:
https://codesandbox.io/s/cocky-wu-mibxl
For some reason the onClick event handler on the link that comes after the dropdown, is not triggered while the dropdown is open and I have no idea why. I hope you can help me out here.
mousedown event happens a lot before the click / mouseup usually (>50ms) and in this case the dom has changed and the element that you clicked is not in the place where you started the clicking (mousedown) and does not receive the click event. You could add a timeout to the useOnClickOutside cb call but that is very unreliable.
Javascript is a single threaded language. So to get the <Dropdown> list to close, you need to close the alert() box first. The closest you will get is the work around in the comments, or you can change the action of clicking the link to OnMouseUp rather than OnClick. Either way, you will still need to close the alert box for execution to continue.

Prevent automatic triggering of a click event on client side using the console window

Clicks on any HTML element can be triggered merely by using the jQuery function .trigger("click") on any selected element. Automating this click triggering can cause a problem when time taken to perform the click matters, for ex: Time based game.
How do I stop the automatic triggering of the click event that can be done using the developers tools (the console window)?
Alternatively,
How do I differentiate between a click made by a user and a click triggered from the console window?
Thanks for the help.
If the person simulating the click does it carefully enough, you can't.
If they just use $(/*...*/).click(), it's easy: A real click event will have properties for the mouse position (pageX and pageY), one created using $(/*...*/).click() won't.
But it's fairly easy to create an event that has those properties, so that would only weed out incompetent cheaters rather than all of them.

How to find a Javascript function if it is event handler?

I want use Chrome developer tool to add a break point to js function to debug it.
For example, a function "buttonAlert()" is binded to a button.
But I don't know where the code of such function, and I don't know where the code that bind the function to button.
So, how can I use the tool to find out the location of function and binding code?
It is actually possible to see event listeners in chrome.
Go to the elements panel, select the element in question and click on Event Listeners on the right side.
Sadly most of the time when jQuery is in use, you only see the part of the source of jQuery that bound the event, not the one that called jQuery.

Is it possible to find JavaScript events that are tied to a specific piece of HTML?

I'm working with someone else's code, and I want to be able to see what JavaScript they have tied to a particular button on the page. Is there some way to watch what code is being fired off by clicking the button in FireBug or something?
Give Visual Event a try. It's a bookmarklet that will highlight all Elements in a page with events bound to them and will give you a nice little readout on what's bound to each Element.

Categories

Resources