The prohlem is that the JQuery Tabs downloaded from JQuery Theme Roller is not bubbling any events beyond that.
For example, I have a click event listener for "body" tag. But clicking on any tab of theme roller does not fire the body-tag-click-event-handler.
I think the JQuery Tabs code is stoping event propagation. Does anyone know how to fix this?
Related
i'm creating a custom button with React.
The appearance based on the press/release of the mouse/keyboard.
Sometimes it cannot be done by css using :active pseudo, so i need the javascript solution.
So i created a state that listen the onMouseDown/Up & onKeyDown/Up.
The problem is, if the user click the button then drag the mouse out of the button then release the mouse,
i miss the onMouseUp event thus causing the activeState locked up forever.
Do you have a solution for the equivalent of the :active & :not(:active) pair in javascript way?
note:
watching event window.addEventListener('mouseup',...) is still not satisfying me. When the mouse click hold & move out from the browser's window, i still missing the mouseup event.
I have a SPA say https://www.example.com. And one of the sub-pages https://www.example.com/foo can be added as a PWA. On navigating to /foo from the homepage, the manifest and service-worker get installed and registered correctly and the PWA can be installed from the A2HS native buttons too, but the event beforeinstallprompt isn't called on chrome. If the page /foo is refreshed then the event is called. It's only when the navigation happens to it from another page that isn't in the scope of the PWA. The lighthouse audit passes all tests on /foo as well.
Has anyone tried creating multiple PWAs on a SPA, or encountered a similar issue?
I don't think this is a good solution, but this is how I got around it on my Gatsby.js site:
On every page (even those where I don't have the "Add to Homepage" custom trigger), I listen for the beforeinstallprompt event.
I set up a listener for a custom event on the <html> element on the pages that have my "Add to Homepage" custom trigger.
When beforeinstallprompt fires, I stash a reference to the event on the <html> tag (this does not get swapped out in between pages for my SPA) using jQuery's $.data() - I couldn't get vanilla JavaScript dataset to work but I may have been using it wrong, and I had jQuery loaded in anyway.
In the beforeinstallprompt handler, after setting the data, I fire the custom event on the <html> element.
The page that has the "Add to Homepage" custom trigger catches this custom event, grabs the reference to the beforeinstallprompt event from the $( 'html ').data( 'event' ) and carries on with it as normal.
Hopefully that helps; it feels pretty hacky but I'm pretty new to PWAs / SPAs / React!
I'm trying to track which element gets focus in a web app. I came across the monitorEvents API, but I'm having difficulty using it for control or focus events. Other events on body are working as expected, but not the control events. Any advice?
I'm not sure how exactly you want to "monitor" control events, but you can set event listener breakpoints on the entire category, or individual events like focus. Whenever a focus listener runs for any node on the page, DevTools pauses on the first line of the listener.
I was trying to monitor focus and blur events on the entire document today.
When using monitorEvents(document.body, 'control') I would only see the event fired when I left the tab entirely and then refocused. I believe what's happening is that once you're focused on the body, it'll never change when you focus on child elements since the listener is at a high level and the events just bubble up to the body with no change in focus.
I tried monitoring events on a few specific child elements and saw that those triggered how I expected. So I decided to add an event listener to each element in the document and that worked well. Here's the one-liner for that.
document.querySelectorAll("*").forEach((el)=> monitorEvents(el, 'control'))
(Apache Flex) Right Click brings up the ContextMenu, which I have changed the contents of. All works fine except the MOUSE pointer was hidden to use a custom pointer. The problem is my custom pointer does not move while the context menu is active, nor does the system pointer show because it is hidden. How do I detect the Activation and Deactivation of the Context Menu? An event listener would toggle Mouse show/hide to cure the problem, but I cannot find one for Context Menu De/Activation.
Aaron's solution to use Mouse.cursor worked. Closing.
I'm working on a web app where I support dragging on the page, by simply watching for mousedown/mousemove/mouseup events. That part works great.
The problem is that I'm only handling dragging inside one particular element, by design, and if a user (accidentally or not) drags outside, it gets "stuck" in drag mode. That is, mouse-down, then mouse-leaves-window, then mouse-up, then mouse-returns to window looks like it's still dragging, to my app.
I haven't figured out any way to solve this -- even something simple like "when the mouse re-enters the window, is the mouse button down?" would work.
Does such functionality exist, and I'm just missing it? Or is there some clever workaround I can employ here?
Legacy support has no importance to me -- if it's an HTML5 solution that only works in FF3.5/Chr4/Sf4, I'm happy with that.
In IE7/IE8 you can detect if the mouse was released outside the window by using the following code:
document.onmousemove = function(event) {
event = event || window.event;
if (document.all && event.button != 1) {
canceldragging();
}
}
In Firefox and Webkit the mouseup event is fired on the document when the mouse is released even if mouse pointer outside the browser window. You can see this using http://www.quirksmode.org/dom/events/tests/click.html
For IE8 the document onmouseup event is fired when the mouse button is released outside the browser window only if you allow document selection to occur (as the link above does). That is, in IE8 you don't get the mouseup event if you use document.onselectstart and cancel the selection, or if you use unselectable="on" on the starting element, or if you called document.selection.clear() combined with document.selection.empty() while the mouse was down.
What if you had the onmouseout event of the element fire the mouseup event?
If you're just using inline handlers, something along the lines of:
<div id='dragElement' onmouseup='alert("stop dragging!")' onblur='this.onmouseup();'></div>
added to whatever event handling code you're already using. This would 'release' the drag whenever the element loses focus. Not the cleanest code, but you get the idea.