I am creating one App in appmaker in which I want to have some code on onHover() event (On Label), I can only see 4 events available
onAttach
onDetach
onDataLoad
onClick
How can I call my methods on onHover event?
App Maker doesn't provide onHover event handler out of the box, however you can add event listener for mouseenter or mouseover event on your own:
// client script
function doMagic(event) {
// do the magic here
}
// onAttach widget's event
widget.getElement().addEventListener('mouseenter', doMagic);
// onDetach widget's event
widget.getElement().removeEventListener('mouseenter', doMagic);
Related
I'm trying to keep my Ckeditor 4 toolbar buttons to a minimum, but want figure out what buttons the users are using most.As such, I'm trying to add google analytics to toolbar button clicks.
Firing off a JS event to record the analytic is no problem. However, I'm having a hard time figuring out how to capture the click event of the toolbar item specifically. Is there an event callback I can bind to? Thanks.
Ideally, this does not have to use the jquery ckeditor connector as I have managed to not use that yet. Although, it is ok to use Jquery itself.
I think I figured it out. There appears to not be a way to do this at the CKEDITOR class level, however it can be done at the individual editor level.
Inside of my instanceReady handler, I can add afterCommandExec event handler.
CKEDITOR.on('instanceReady', function (e) {
var textarea_id, editor;
textarea_id = e.editor.name;
editor = CKEDITOR.instances[textarea_id];
// Attach handler for events
editor.on('afterCommandExec', function (evt) {
// Record Analytic of toolbar bar & keypress events
// See http://docs.ckeditor.com/#!/api/CKEDITOR.command-property-state for vals
var cmd_name, cmd_prev_state, cmd_new_state;
cmd_name = evt.data.name;
cmd_prev_state = evt.data.command.state;
cmd_new_state = evt.data.command.previousState;
console.log([cmd_name, cmd_prev_state, cmd_new_state]);
// Call analytics event next ...
});
})
References:
Event callbacks for the global CKEDITOR level: http://docs.ckeditor.com/#!/api/CKEDITOR-event-instanceReady
Event callbacks for the editor instance level: http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-afterCommandExec
I'd like to avoid that mouse events triggered by the user don't get dispatched to their target objects, effectively "freezing" the GUI for the user.
In a sample application featuring just a single mx.controls.Button I called addEventListener on the button to get notified of mouse events. In the event handler, I called Event::stopImmediatePropagation on the event, assuming that this would "discard" the event. Clicking the button would call my event handler, but yet the button was "clicked" (it animated and triggered an event).
How could I do this?
button.mouseEnabled = false;
button.mouseChildren = false;
should work
Depending on how advanced your interface is, you could just throw an object (s:Rect in an s:Group would work) on top of everything, set width and height to 100%, and disable mouseChildren
USE removeEventListener()
var b:Button = new Button();
function init():void
{
b.addEventListener(MouseEvent.CLICK, onButtonClick);
}
function onButtonClick(event:MourseEvent):void
{
b.removeEventListener(MouseEvent.CLICK, onButtonClick);
}
I hava a custom component and it contains a child icon. If I add a mouse-click event listener to both component(click-listener1) and icon(click-listener2), the event dispatched sequence is click-listener2, then click-listener1. I can understand it. But if I add a custom event to component (listener1), and mouse-click event to icon(listener2), when icon is clicked, the component will dispatch the custom event. In my test, the event dispatched sequence is listener1, then listener2. It doesn't match with event-bubbles rule.
In my opinion The custom event is dispatched in listener2, which triggers listener1. Why event flow sequence is not listener2, listener1?
In component.
icon.addEventListener(MouseEvent.CLICK, iconClickHandler);
private function iconClickHandler(event:MouseEvent):void
{
trace ("Listener2");
var customEvent:CustomEvent= new CustomEvent(CustomEvent.CUSTOM_EVENT, true, true);
dispatchEvent(customEvent)
trace ("Listener3");
}
In Application, which contains component
component.addEventListener(CustomEvent.CUSTOM_EVENT, customEventHandler);
private function customEventHandler(event:CustomEvent):void {
trace ("Listener1");
}
UPD
You've got:
private function iconClickHandler(event:MouseEvent):void
{
trace("listener2");
var customEvent:CustomEvent= new CustomEvent(CustomEvent.CUSTOM_EVENT, true, true);
dispatchEvent(customEvent);
trace("listener3");
}
private function customEventHandler(event:CustomEvent):void
{
trace("listener1");
}
When MouseEvent.MOUSE_CLICK is dispatched, it triggers first lucky listener - it is your component function iconClickHandler. Here we trace "listener2" and dispatch custom event.
Due to syncronious nature of events, CUSTOM_EVENT listeners are triggered immediatly, that means that dispatching an event is similar to calling listener functions. Events are not stored anywhere, they are not delayed: listeners to events fires immediatly, in the same control flow, in the same thread.
CUSTOM_EVENT was dispatched, its listeners were triggered - we've got a call to customEventHandler and "listener1" in console.
When all the listeners were triggered, control returns to iconClickHandler and "listener3" is traced to console.
That's why we've got output:
listener2
listener1
listener3
I'm implementing a map application. It uses Google Maps API for Flash. There is a one callback function that is triggered when the map is clicked. Additionally, there are plenty of polylines that are generated dynamically. The polylines have also click event listener assigned to them. The problem is when I click a polyline, the map click event is triggered at first and then the polyline's click event is fired.
I can't resolve that issue. It's really anoying. Here is code that assigns callback to the map's click event:
map = new Map();
map.key = GOOGLE_MAP_KEY;
map.addEventListener(MapMouseEvent.CLICK, onMapClicked, true);
and here is code that assigns callback function to a polyline's click event:
var polyline:Polyline = new Polyline(path);
polyline.addEventListener(MapMouseEvent.CLICK, cutToEnd);
I need to supress the "onMapClicked" function's invocation when I click on a polyline. Only "cutToEnd" method should be invoked.
Thanks
map.addEventListener(MapMouseEvent.CLICK, onMapClicked, true);
You use bubblingPhase here (third "true" parameter). It means, that when you click polyline, event "reaches" first your map, because it's capturing from stage to your button. Set parameter "false", or leave only 2 parameters (useCapture is "false" by default). Then in the end of your polyline click handler add event.stopPropagation() method call. It will make event stop bubbling to stage, and it won't "reach" your map.
UDATE: If MapMouseEvent does not bubble you can compare event.target and event.currentTarget properties. In your polyline click listener they will be equal. So you may add
if(event.target != event.currentTarget)
return;
at the beginning of your map click listener.
Is there a way to write a custom event that gets triggered when the user clicks outside of that custom component instance? Basically anywhere else in the main flex app.
Thanks.
You can use the FlexMouseEvent.MOUSE_DOWN_OUTSIDE event. For example:
myPopup.addEventListener(
FlexMouseEvent.MOUSE_DOWN_OUTSIDE,
function(mouseEvt:FlexMouseEvent):void
{
PopUpManager.removePopUp(myPopup);
}
);
stage.addEventListener( MouseEvent.CLICK, stgMouseListener, false, 0, true );
...
private function stgMouseListener( evt:MouseEvent ):void
{
trace("click on stage");
}
private function yourComponentListener( evt:MouseEvent ):void
{
trace("do your thing");
evt.stopPropagation();
}
Got this from Senocular. I think it applies to this subject, at least it did the trick for me. What jedierikb suggested seems to be the same, but a little incomplete.
Preventing Event Propagation
If you want to prevent an event from propagating further, you can stop it from doing so within an event listener using stopPropagation() (flash.events.Event.stopPropagation()) or stopImmediatePropagation() (flash.events.Event.stopImmediatePropagation()). These methods are called from the Event objects passed into event listeners and essentially stop the event from happening - at least past that point.
stopPropagation prevents any objects beyond the current from recieving the event, and this can be within any phase of the event. stopImmediatePropagation does the same but also takes the extra step of preventing additional events within the current target receiving the event from happening too. So where as stopPropagation would prevent sprite A's parent from receiving the event, stopImmediatePropagation would prevent sprite A's parent as well as any other listeners listening to sprite A from receiving the event.
Example: toggle between using stopPropagation and stopImmediatePropagation
ActionScript Code:
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0x4080A0);
circle.graphics.drawCircle(50, 50, 25);
addChild(circle);
circle.addEventListener(MouseEvent.CLICK, clickCircle1);
circle.addEventListener(MouseEvent.CLICK, clickCircle2);
stage.addEventListener(MouseEvent.CLICK, clickStage);
function clickCircle1(evt:MouseEvent):void {
evt.stopPropagation();
// evt.stopImmediatePropagation();
trace("clickCircle1");
}
function clickCircle2(evt:MouseEvent):void {
trace("clickCircle2");
}
function clickStage(evt:MouseEvent):void {
trace("clickStage");
}
Click the circle and see how the event is stopped with each method. stopPropagation prevented the stage from receiving the event while stopImmediatePropagation also prevented clickCircle2 from recognizing the event
normal output
clickCircle1
clickCircle2
clickStage
stopPropagation output
clickCircle1
clickCircle2
stopImmediatePropagation output
clickCircle1
Flex/Actionscript 3 - close popupanchor on mouse clicked anywhere outside popup anchor
for 4.6 SDK try this..
frmPUA.popUp.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, menuPopOutside, false, 0, true);
Full code is avaiable at
http://saravanakumargn.wordpress.com/2013/12/14/flexactionscript-3-close-popupanchor-on-mouse-clicked-anywhere-outside-popup-anchor-2/