Im using Ext JS 4. I have a button inside a container. I want the container to receive mouseover, mouseout, and click events, but the button is causing the mouseover and mouseout event handlers to be called twice on the container. How can i disable the events on the child button?
I believe you are running to 4.0's new bubbleEvents behavior. Components now propagate some events to their parent containers. This happens in code, independent of DOM event bubbling, up the component hierarchy.
http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.container.Container.html
The best fix is to simply stop the event once you've handled it. That should prevent all bubbling, component or DOM. It is generally a good idea to do this for click events to make sure one and only one thing happens in response to a click, but I'm less certain it's appropriate for mouseover and mouseout.
panel.on('click', function(e) {
e.stopEvent();
// do your stuff
});
another fix you could try (I haven't) is to wipe bubbleEvents on the button.
Another, possibly less robust fix is to turn on event buffering:
el.on('click', this.onClick, this, {buffer: 10});
Buffering collapses duplicate events in a configurable time window into one and it's useful for smoothing out rapid fire or duplicate UI events, but I'm not sure how it plays with bubbling.
{
...
preventDefault: true,
...
}
Related
I have two canvases and two stages in CreateJS / EaselJS. The first stage has autoClear set to false and I am doing dynamic drawing on it starting with a stagemousedown event. The second stage uses nextStage to send mouse events to the first stage. The second stage has interface such as a Bitmap that I want to press on to go to another page. When I click on the Bitmap, the stage beneath does the dynamic drawing. I want the click on the Bitmap not to go through to the first stage but stopImmediatePropagation does not work, nor does putting a clone of the Bitmap with mouseEnabled false on it underneath. I can just use mousedown on the Bitmap so the user does not notice as much, but was wondering if there is a way to disable mouse events from passing through the top stage if they are acting on an object with an event set to capture? Thanks in advance.
The stagemousedown and other stage events are decoupled from the EaselJS object event model. They are catch-all events, which basically represent mouse interaction with the . Because of this, catching and stopping these events won't interrupt the display list hierarchy.
Typically if you want to block other events in the same stage, you can create a canvas-size box (Shape, etc) that will block the interaction. When dealing with nextStage, this is especially true, since we are passing on events that are unhandled by objects in the EaselJS display list.
A better approach might be to toggle the nextStage on stagemousedown, so it is null during the click event. Not sure if this will work, but its a start.
Most mouse-APIs allow one to check weather or not a mouse button was pressed or released. As an example: The Java-Swing-API also allows to check for a "click" event, that is just an additional event that get's triggered whenever a "release" event was triggered after a "press" event, though it is hard to imagine to a scenario where this does not happen.
When implementing my own UI with a common mouse API, I now wonder how to register a "click" upon a general button. I went ahead and checked various UIs used by various programs I use and I got the general feel that any button is considered "clicked" when the mouse button is released above it.
They do not require the mouse-button to be "pressed" above them before being "released". It seems the "pressed"-event only tries to catch an object to be "dragged", though most mouse-APIs have their own "dragged" event to be triggered, the "pressed" event seems to be used to select the item that should be dragged.
Then right as I write this, it seems that browsers do not allow button presses when the mouse was not "pressed" upon the button before being "released" above it.
Question 1: Do I miss something here or am I right in these observations?
As such, a "UI"-Class managing the components of any UI needs to consider:
It's components to be drawn
The components that are focused
The components that have been "pressed" and are as such "dragged"
A "click" is triggered simply when the mouse button is "released" upon all components that are "focused". Or a "click" is triggered upon all components that were "pressed" and are still "focused"?
Question 2/3: Will this implementation be a good start or do I miss something? Which one is better?
Question 1:
Pressed: event is generated when you push down the mouse button
Released: event is generated when you release the mouse button (which has been pressed down before)
Clicked: event is generated when a mouse button Pressed & Released.
I am using navigation window in my app.
I want to reset variable when every time window appear.
I tried
$.win.addEventListener("focus", function(e){
alert("window appear");
});
This is not calling. So i tried following:
$.win.addEventListener("open", function(e){
alert("window appear");
});
But this is only call when first time it open..it is not called when screen open from back clicked.
Focus should work if you minimise the app or show the status bar, blur will also be triggered when the window loses focus.
It sounds like you are never closing the window or you are registering the event listeners inside another function, ensure the event listeners are defined at the top level (not in any other functions).
Console.log doesn't work very well in titanium use Ti.API.info('Alert message');
KineticJS seems to have an issue with handling clicks on background layers after redrawing the stage.
I have a jsfiddle with a minimal example of this problem. http://jsfiddle.net/Z2SJS/
On line 34 I have:
stage.draw()
If this is commented out, events fire as they should. When this is present, after dragging the click events to the background will stop firing.
I know that in this example I am not doing anything that would require me to redraw the stage, but in my project I am using the dragstart and dragmove events to manipulate objects on multiple layers, and I then lose reference to my background clicks.
Is there something I need to do to ensure that redrawing the stage does not cause my events to stop firing?
Instead of using stage.draw() use foreground.draw()
here is the updated fiddle
Alternately: set dragOnTop: false inside the circle instantiation. Fiddle2
Hi We are using Flex 4 in our project on UI side. On loading the application dashboard, we get a set of pods. We click on a pod and the pod view opens. This pod view contains datagrid with the first column as a hyperlink. When you click on hyperlink another screen opens which is our module screen.
This module screen has a SUBMIT button on top and a couple of datagrids. Now we load data in the grids using RemoteObject. The parent container for each of the grid is a WindowShade Component.
Now our requirement is that the user can make modifications in one or both of the grids and click SUBMIT. Depending upon which grid the user has modified I want to make the corresponding Window shade as read only. IF the user modifies both the grids, I need to make both the Window Shade components as read only and disable the SUBMIT button. The user should be able to see this change immediately on click of SUBMIT without closing the screen or navigating away from the screen.
When the user opens screen for the first time, we get some statuses from backend and Depending upon these statuses, I make the Window shades as read only and enable/disable the buttons. When I click SUBMIT, I still hit the backend and get the status but no enabling/disabling of buttons or window shade happens.
I have written the logic for enabling/disabling in the updateComplete method of my mxml file for which swf is created.
the updateComplete gets called when user opens screen for the first time.It does not get called when the user clicks SUBMIT. why is it so?
I have tried using Loader and SWFLoader to load my SWF file as below but it is not working either.
var request:URLRequest = new URLRequest("com/citi/risk/credit/maintenance/view/widgets/CRCMaintenanceModule.swf");
var loader:Loader = new Loader();
loader.load(request);
Any help or pointers would be greatly appreciated.
Two things you may want to consider:
1) In short, FlexEvent.UPDATE_COMPLETE is an event that gets dispatched has completed rendering itself (gone through a Flex component life cycle). This could happen once, or many times depending on how often the component changes and it's state needs to be re-rendered.
The frequency/timing of this event will vary based on the object that is dispatching it. For example a container that is being resized will dispatch this numerous time. A label that never changes may only do it once.
Instead, you should consider adding a "creationComplete" (FlexEvent.CREATION_COMPLETE) event listener. "creationComplete" only happens once, you can add the listener to any object that contains the submit button.
2) When you click submit, the object you've added the "updateComplete" listener to probably hasn't changed enough to go through Flex's component life cycle. So no event is dispatched.
The answer to why this doesn't happen actually depends on which object you have added the event listener to.
Have you tried using a "click" handler on the submit button, so you could disable the appropriate elements when the button is clicked? Again, the "click" event will happen only once, unlike "updateComplete" ;)