I have a component called X. I'm trying to make a menu come down from it when I put my mouse over it.
I have a mouseOver handler which changes the component's state to another state which shows an extra child component (the menu) on the lower part. This of course makes the X component grow.
I also have mouseOut event handler which makes the menu disappear by returning component X to its original state.
When I move the mouse over the component the menu appears as expected. But when I move the mouse down to the menu that is now visible, as soon as I touch it, it disappears. This way it's impossible to reach the menu.
I guess the mouseOut event is triggered as soon as I move out of the old boundaries. Is this so? And how can I avoid it? The new boundaries should now consider the extra child with the menu.
Thanks in advance,
Nuno
When you move over the child element you are mousing out of compo0nent "X".
Without seeing code I can't really help you. However you might want to try a few things.
Make a function that tests hit area
of the mouse and component and only
dispatch the event if it passes a
mouse out only if it isn't over your
component. Your component shouldn't dispatch a mouse out event just because the mouse moved out of the component
Change your listeners as needed
Event propagation
But really there is no way I can help more without code.
Related
I am working with Vue SFC and Composition API and my goal is to have a shiny-on-hover effect that follows the mouse when it hovers a specific div on the page.
I added a #mousemove directive on this div. Events are triggered when the mouse hovers the div (which is the expected behaviour) but my issue is that events continue to be triggered even after the mouse left the div
Here is the Vue SFC playground where I reproduced the issue and added more details.
Oh, that's a fun one: You are drawing the blue dot in a CSS :after of the container, and put it right under the cursor. However, it does still belong to the container. So basically a part of the container gets stuck to the cursor, so it is still hovering a child of the container, even outside it, and the mousemove event keeps firing.
When I move the mouse fast enough, I can escape the blue dot and the events stop. Similarly, I can pick it up again.
An easy fix (as suggested by #tao in the comments), is to stop the :after element from receiving pointer events:
.ctn:after{
pointer-events: none;
...
}
I have a Canvas with a VGroup inside that is populated with objects of various types, some of which have mouseEvents such as MOUSE_OVER.
The problem I am having is getting the Canvas to scroll properly with the mouse wheel. It will only work if the mouse is over the scrollbars.
I tried faking it by listening for the mouse wheel on the stage, then manually scrolling the Canvas. But when the the Canvas scrolls to where an object moves under the mouse, things get screwey.
Any suggestions?
take care,
lee
UPdate:
Ok. I found that if I use the canvas without my addition, it scrolls only when the mouse is over an object inside it. If the mouse is in an empty area, it does not scroll.
When I say 'the mouse is over an object inside it', I mean text fields and other objects that have visual elements.
Ok. I've found a partial solution. If I intercept the mouseWHeel event on the VGroup, the scrolling works. However, when I get to a RichEditableText object in the VGroup, the scrolling stops. Before, it scrolled just fine.
Found an interesting solution here. The mouseWheel event is not triggered in a canvas unless it is over an InteractiveObject, i.e. text fields etc. However, as I was testing to make sure my mouse was actually in the canvas I discovered that the event is triggered in the 'white' space between objects if the canvas has it's backgroundColor property set. So, set that backgroundColor and, if you didn't want a background, then set backgroundAlpha to 0.
So, I have a component based on canvas, and within that component I have two images. I have the component listen for a click and when that event occurs one image goes transparent and the other becomes visible.
This part works perfect.
Now, on clicking that component, I also want to do something to the parent canvas, I already have this working for more basic types (image, canvas, text, etc) but the problem with my component is that the click event has the internal image as the target, so what I want to happen to the outside canvas is happening to the canvas of the component.
How do I make my component as a whole the target of any clicks on it?
3.5 SDK
You can make the outer component the target of the clicks by setting mouseChildren = false on the outer component. Clicking anywhere within the component (including on any of the sub-components) will then set the event target to the outer component. Hope that helps.
I handled this by adding a click handler to the children that would stop immediate propagation, then dispatch a click event from the outer component. Wade's solution is much better.
I'm aware of PopUpManager and that custom modal windows can be created.
But let's say I have a simple Canvas(or any component) and when I show it the background needs to be blurred out like how PopUpManager does when a new pop-up is shown.
Is this possible?
Not without a lot of work. The PopupManager puts a blur on Application, and then puts the popup in front of the Application, but as a child of the SystemManager, so it's a sibling to the Application in the display list rather than a child. You could take a screen shot of the Application, run a blur filter over it, and place it as the last child of Application, and then place your component on top of that, but if you do that you might as well just use PopupManager in the first place.
I think the blurring has to do with how you set the alpha level on the component.
I work on a Flex app that loads external Flash resources created in CS3. I've just been reading about how I can use the Flex mx.managers.CursorManager class to change the mouse cursor explicitly. But what I'd ideally like to do is to set a mouse cursor property on some elements in the loaded Flash SWF, so as the cursor passes over this element the cursor automatically changes without me having to respond to mouse events.
Is it possible? Does Flash support this in DisplayObject or something?
It seems the Flash SWF is overriding me. Some objects automatically display the hand cursor with mouse-over, and I can't see a way to turn this off on a DisplayObject?
To set the the "Hand" cursor, as soon as the mouse hovers over a element you have to specify these properties:
<mx:VBox
useHandCursor="true"
mouseChildren="false"
buttonMode="true">
However this only works for the Hand cursor. Also take care of the required mouseChildren attribute. You either have to set this to false to achieve the cursor for all contained items or you have to specify the attributes useHandCursor and buttonMode for all elements. However the side effect of settings mouseChildren to false is that all mouse events (mouseOver, mouseOut, click,...) on child elements will no longer work.
In case you want to use a different cursor than the hand cursor I am afraid you have only two possibilities:
Replace the standard hand cursor by your cursor
Use the mouseOver and mouseOut events to set the cursor programmatically.
In any object inheriting from Sprite whose buttonMode and useHandCursor properties are both true, you'll get a hand cursor by default when you roll over it. Some objects do this by default, correct; Button and LinkButton are examples you've probably noticed. Simply setting useHandCursor to false on any of these components will disable the hand cursor easily enough, even when its buttonMode property (which is responsible for dispatching click events) is set to true.
If you want to set your cursor to anything else on mouseOver, though, you'll have to respond to mouse events; there's no way around that. Depending on your design goal, you could break that work out somehow, maybe by inheriting from some other object and then overriding its default behavior, but in some form or other, the runtime needs to know you want those mouse events handled.