Clicking through absolute positioned divs - javascript

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?

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

Detect click event to prevent autocomplete list from closing jQuery

I have an issue in IE that is causing my autocomplete list to close when I click on the scrollbar, when the autocomplete element is on a dialog. It works fine for my other autocomplete inputs that are on the main page.
How can I add a click handler to detect what was clicked and cancel the close function if the target of the click was the scrollbar of the autocomplete.
Id love to just comment but since my renown isnt high enough here:
Try going trough this post it might contain solution for you.
Clicking on a div's scroll bar fires the blur event in I.E

How to inspect element on popover with unknown identity?

I am running some browser tests on Chrome and cannot find a particular popover in my codebase.
I figured I could snag its name or ID via manual inspect element, but it of course disappears when I try to right click it.
Without much identifying information to go by (unless I try js things with surrouding divs I suspect it might live in?), how can I get a handle on this element?
If it's a hover event that is triggered, in inspect element you should be able to force the state. Right click the code in your inspect element and you should see things like :hover and :focus and maybe :active. Just select whichever one triggers the event, and you should be able to view the code.
I found this useful when I needed to inspect a popover that disappeared on the next mouse click:
Inspect the element that triggers the popover (in my case an <a> that shows the popover when you click on it).
In the dev tools go to Elements view and, under there, Event Listeners.
Expand the blur event using the little arrow to the left of it.
Click "Remove" on any listeners under this event (or right-click and choose "Delete event listener". With no listeners for the blur event, the popover will no longer disappear when you click away from it.
Trigger the popover as usual. It will now stay there while you inspect any elements within it.

Make a event listener

I have div which is cloned on clicking image next to And.
Right click event listeners are working in jsfiddle but not actually working in my page. :(
Do i need to do something extra. I tried adding different jquery links , but to no avail.

jQuery click event for document but ignore a div

I have a online Slide Show I'm working on using jQuery. I have use $(document).click event to detect when a user clicks on the page to know when to show the next bullet point in the slide or to move to the next page.
The problem I'm running into is my job had me insert a comment box on the bottom of the page and when ever someone clicks on the comment box or the save comment button it also fires the click event for the page.
Is there a way I can have the click event for the entire page but ignore it when someone clicks in the DIV the Comment box/Save button are in?
You will most likely need to stop the propagation of events in your Comments div using the event object's stopPropagation() method:
$('#comments').click(function(e) {
e.stopPropagation();
});
if that doesn't work try using preventDefault():
e.preventDefault();

Categories

Resources