I have many elements in a webpage of my APP.
How to make it so that whenever the cursor is not hovering over any of the scrollable elements, then it will automatically target a designated element?
When the user uses the mouse wheel or the arrow buttons when not on any element that's scrollable (including the <body>), no scroll event is fired. This is also the case when the user attempts to scroll up when at the very top, and when they attempt to scroll down when at the very bottom.
So, a scroll listener won't work. You probably need to instead listen for mouse wheel events instead.
You probably need:
A wheel listener on the window (so it listens to all wheel events)
From the event's target - the element that the event was dispatched to - determine if it is ever scrollable. Do the same for all parents. While you can do this programatically, to an extent, it'd be easier if you identified which elements are scrollable, and then just check to see if any of the parents match that. if (e.target.closest('.scrollable1, .scrollable2')) return;
If that condition is not fulfilled, then the user attempted to scroll when not over a scrollable element - so you can then call .scrollTo on the desired target element.
Related
I have 2 divs stacked upon one another. I want to be able to receive click events for the bottom element without losing hover events for the top element.
If I assign pointer-events: none top the top element, the click-through works, but then I lose the hover events for the top element.
How can it be done?
The MDN docs clearly says that's what is supposed to happen:
none
The element is never the target of mouse events; however, mouse events
may target its descendant elements if those descendants have
pointer-events set to some other value. In these circumstances, mouse
events will trigger event listeners on this parent element as
appropriate on their way to/from the descendant during the event
capture/bubble phases.
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
What you can do is write a jQuery script that captures the clicks and transmits them.
jQuery("top-div").click(function(e)
{
e.preventDefault();
jQuery("bottom-div").click();
});
Something like that...
I have a component which is essentially a div containing a list of div elements (other mini components). The inner divs can change (add, delete) based on user interaction, therefore allowing the user to scroll if we have an overflow.
When showing this div and then scrolling with the mouse for the first time, the onScroll is called without problems. When I hide the div via css: transform: translate3d, then reopen the div the onScroll no longer works.
I added onWheel with an empty method to the div in the render function.
The scroll works!
Can someone please explain why when I added a listener to the wheel event it will cause the scroll event to fire? Also why is the scroll event is not getting fired in the first place?
I've tried to reproduce it in a fiddle, but it seems to work:
jsfiddle
The question is probably a bit more complex than the title might make you believe, but in the end it nails down to that question. But first let me show you the bigger picture:
I am using chromiums rendering/content/javascript engine for user interfaces in my application. Below the user interface though is a real 3d world that also needs to be informed about interaction. So you can imagine my user interface like a regular html page where the body is transparent. So whenever i get a message for the user interface (like mouse move, mouse down and so on) i need to be able to detect if that message was handled by the user interface or if it should be propagated to the world "below". All this only has to work in chrome, other browsers are unimportant.
So far i had the following ideas (i keep using mouse move as an example):
Attach a mouse move handler to window (or html or body) and when its hit -> deliver to the application. Problem here is that events get propagated up the chain no matter if handled or not
Attach a mouse move handler to window and check if the event target is html or body. Problem here is if i have like a tansparent container div thats only used for positioning or arranging child nodes i will get this element if its hovered even tho it should go to the world there
Attach a mouse move handler to window, mark elements that should not capture the mouse (like transparent divs) with an attribute and in the mouse move handler check if the target has such an attribute. If yes, then fire the event, else its handled. Problem here is if one of these nomouse-elements is over an element that wants to capture the mouse i miss it
Attach a mouse move handler to window, mark elements that should not capture the mouse with an attribute. Add a mouse move handler to all elements that do not have the no-mouse attribute and set a property to true. in the window mouse handler check if that property in the event object is set. This could work i think.
Is my last idea feasible? Do you know of a better way to achieve this? Greetings and thanks in advance.
You could try to make a transparent div over the whole screen and attach the mouse handler to it. Use the z-index for placing the clickable elements in front of it.
The whole screen div CSS:
html, body {
weight: 100%;
margin: 0;
}
#whole-screen {
min-height: 100%;
}
Is there a way in JavaScript to propagate events to elements obscured by another one? Because I have an element with position: absolute that obscures elements that aren't parent elements of it, but I'd like click, mousemove and mousout events to pass through this element. The solution can be Mozilla Firefox specific, because I'll use it in a Firefox Add-On.
Maybe the css property pointer-events:none; is what you looking for. It's used on the twitter homepage for example, so you can click on the text in the "trending topics" also when it overlay by fade out graphics.
You could use getElementsByTagName("*") to get all elements in the page. Using a find-world-position function, you could get the position of an element relative to the top left corner of the page. You could now use offsetWidth, offsetHeight, and mouse position [browser specific, lol] to check if the cursor is over your element.
If the cursor is over your element, fire the event.
The above function should be attached to window.onmousedown/onmouseup/onmousemove/whatever
I have an HTML element with overflow: scroll. The click event listener registered with the element is triggered when I click on the element, but not when I click on the scroll bar for the element. Is it possible to capture mouse events which occur on an HTML element's scroll bar?
The reason I want to do this is to make a visual popup element disappear when ever a click event occurs anywhere outside the popup element.
you can style away the standard scroll bar and place your own, which would allow you the control you seek. http://livepipe.net/control/scrollbar might help.