React onClick event suppressed while dropdown is open - javascript

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.

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();

Clicking through absolute positioned divs

I am using the autocomplete js from here:
https://goodies.pixabay.com/javascript/auto-complete/demo.html
It all works fine but when I click one of the suggestions
A click event fires on the body element which then shuts down the whole drop down menu.
(this is by design as in every other case where there body is genuinely clicked I want the drop down menu to disappear)
When I check the event that is firing on the body the path is showing that it is starting at the body element. I have put event stop propogation functions on all of the divs created in the drop down menue including the ones created by the autocomplete. It doesn't seem to be coming from them - it is if it the click is firing the click event of the suggestions divs but additionally of body underneath as an entirely separate click event.
How can I stop this from happening?
Many thanks.
SOLUTION:
The autocomplete javascript code from pixabay was capturing the mousedown event - and then setting the display of the suggestions to none. This meant that when the click event fired the suggestion div was no longer there causing it to fire a click on whatever was underneath the click. So I changed the mousedown event in the autocomplete code to click and this has fixed the problem.
This seems like a bug in their code? I can't see a reason why you'd ever want the click event to be fired on what happens to be underneath a suggestion?

How to solve vmouseup being interrupted

I'm using jQuery Mobile to develop one single page to use in Android Webview.
There is an button which I need put some pressed effect, and then I use vmousedown to add press style class and vmouseup to remove the class added before. However, there are something interrupt the vmouseup process.
Reproduce:
First, press one button, and it trigger the vmousedown event.
Then, keep hold your finger and move outside the trigger area.
Finally, loosen your finger and you will see it keeps the state that you hold it.
I have done a demo to test, and find that it even won't trigger vmouseout or vmousecancel, the last event have been triggered is vmousedown.
Is there anyone know why this happen and how to solve this?
This is code : Fiddle
When I written an example to test gesture event, I noticed that, the taphold event will be triggered and then I put it in on method and this problem fixed.

Using emit to trigger an EnhancedGrid event

It seems there is a bug in the dojox.grid.EnhancedGrid. The "onApplyCellEdit" is not triggered on editing a cell and then clicking Ok button in IE browser. Here is a jsfiddle,
http://jsfiddle.net/eZVkA/3/
As you can see, when you edit the cells in second column and then click on the button (without pressing enter or clicking on the grid), the "onApplyCellEdit" is triggered in all the browsers except IE. I presume this is a bug.
I am trying to resolve this by using emit function but not sure how to use it properly. I wish to use emit on click event of the button and trigger the "onApplyCellEdit" of the EnhancedGrid.
Any solutions?
You do not need emit but it is a good function to learn though.
http://dojotoolkit.org/reference-guide/1.9/dojo/on.html
by calling grid.edit.apply(); it will trigger the event. Grid is referring to the widget itself.

Detect right click delete/cut/copy tinymce

How can I detect right click delete on tinymce ? I detected the paste event by the onPaste event, but I am stuck on the cut delete and copy. I know that there is the event onContextMenu but there doesn't seem to be a function or variable that holds the menu items.
Any help please ?
I assume by "right click delete" you mean selecting delete from the dropdown browser right click menu. Problem here is that there is no adequate event being fired in the tinymce iframe. The only thing which comes to my mind is the event onNodeChange. This should get fired, but this one gets fired on several kind of other tasks too.
Another (not easy) option is to develop an own BrowserAddOn which can listen for a browser intern event and then do its magic.

Categories

Resources