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.
Related
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();
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?
I'm using the MDL tab component. After a tab is clicked and it displays the content for that tab, I'd like to set the cursor focus in a certain text input within that tab's content.
My initial approach was just to handle the click event of the tab element and then set focus accordingly. The problem I'm having is that calling .focus() on the text input element isn't working because it tries to set focus before the text element is actually visible, which no browser seems to like doing for you. If I set focus inside a setTimeout() delay it works, but that doesn't feel like a very clean way to go about it.
Is there any kind of event that can be handled for when a tab is clicked and has finished displaying it's contents? I've also looked at using mutation observers to detect when the text input element is visible but browser support for those is fairly limited still.
No there is no such option. I think you have to use setTimeout or setInterval
You can look into the source. Perhaps write your own MaterialTabs constructor and register it.
Material-Design-Lite source, MaterialTab
I think there are also some libs that can do this like jQuery. You can also see
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
This works only in modern browser but has a legacy implementation.
I've added this line :
window.dispatchEvent(new Event("tabSelected"));
to the material.js file, at the end of the selectTab() function. This way, the event is fired right after the tab content is shown.
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.
I am creating a browser extension that modifies the Twitter timeline by adding some links to each tweet row in a user's Twitter timeline.
Generally whenever the tweet row is clicked, Twitter will pop out the right-hand panel with more information, except for when the user clicks links like Retweet, Reply, etc. I'm not sure what Twitter's JavaScript is applying to these links to prevent them from causing the panel to be opened, but I'd like to do something similar. I have tried inspecting the elements in Google Chrome, but the event handlers are not revealed.
Any suggestions?
The event handlers are probably being added programmatically via script. You could try to remove the event handlers (see the docs), but it might be easier to clone the element in question, then hide the original. See cloneNode documentation for information.
Without any sample html, I can't really give you a good example, but here's a generic jsFiddle I threw together to demonstrate the concept: http://jsfiddle.net/sacCK/1/
I solved my problem by stopping the event propagation. This prevented the event from propagating to the event handler for the container element.
With jQuery I was able to apply an onclick handler like so:
$("#elementId").click(function(event) {
event.preventDefault();
event.stopPropagation();
// other actions
});