MouseWheel in Chrome and Firefox

Question

I'm trying to handle the mouseWheel event in an advancedDataGrid with not success. Without any additional code my adg can be scrolled with the mouse in IE but not in firefox and Chrome, why? Why does it behave different in those browsers?

Then I tried this code but it does not work:

protected function adgMouseWheelHandler(event:MouseEvent):void
{
    event.delta = event.delta > 0 ? 1 : -1;
}

and then setting the event mouseWheel in my adg like this:

<mx:AdvancedDataGrid id="myADG" width="100%" height="100%" color="0x323232" 
                     dataProvider="{_currentDatosBusqueda}" verticalScrollPolicy="auto" 
                     fontSize="11" fontFamily="Arial" fontStyle="normal" 
                     fontWeight="normal" doubleClickEnabled="true"
                     itemDoubleClick="dobleClickFilaDataGridBusqueda(event);"
                     useRollOver="true" mouseWheel="adgMouseWheelHandler(event);"
         >  

Any ideas?

Thanks!

Quatrain

Answer 1

Fix for no MouseWheel in a Flex app when wmode="opaque" (it actually works in IE, just not Firefox or Chrome, probably not Safari or Opera either). This also fixes the different MouseWheel scroller rates between Firefox and everything else.

Add this JavaScript to your wrapper: .

        if(window.addEventListener) {
            var eventType = (navigator.userAgent.indexOf('Firefox') !=-1) ? "DOMMouseScroll" : "mousewheel";            
            window.addEventListener(eventType, handleWheel, false);
        }

        function handleWheel(event) {
            var app = document.getElementById("YOUR_APPLICATION");
            var edelta = (navigator.userAgent.indexOf('Firefox') !=-1) ? -event.detail : event.wheelDelta/40;                                   
            var o = {x: event.screenX, y: event.screenY, 
                delta: edelta,
                ctrlKey: event.ctrlKey, altKey: event.altKey, 
                shiftKey: event.shiftKey}

            app.handleWheel(o);
        }

And drop this support class into your main MXML file (Declarations for Flex4): .

package {
import flash.display.InteractiveObject;
import flash.display.Shape;
import flash.display.Stage;
import flash.events.MouseEvent;
import flash.external.ExternalInterface;
import flash.geom.Point;

import mx.core.FlexGlobals;
import mx.core.UIComponent;
import mx.events.FlexEvent;

public class MouseWheelSupport {

    //--------------------------------------
    //   Constructor 
    //--------------------------------------

    public function MouseWheelSupport() {
        FlexGlobals.topLevelApplication.addEventListener(FlexEvent.APPLICATION_COMPLETE, attachMouseWheelHandler);
    }

    //------------------------------------------------------------------------------
    //
    //   Functions  
    //
    //------------------------------------------------------------------------------

    //--------------------------------------
    //   Private 
    //--------------------------------------

    private function attachMouseWheelHandler(event : FlexEvent) : void {
        ExternalInterface.addCallback("handleWheel", handleWheel);
    }

    private function handleWheel(event : Object) : void {
        var obj : InteractiveObject = null;
        var applicationStage : Stage = FlexGlobals.topLevelApplication.stage as Stage;

        var mousePoint : Point = new Point(applicationStage.mouseX, applicationStage.mouseY);
        var objects : Array = applicationStage.getObjectsUnderPoint(mousePoint);

        for (var i : int = objects.length - 1; i >= 0; i--) {
            if (objects[i] is InteractiveObject) {
                obj = objects[i] as InteractiveObject;
                break;
            }
            else {
                if (objects[i] is Shape && (objects[i] as Shape).parent) {
                    obj = (objects[i] as Shape).parent;
                    break;
                }
            }
        }

        if (obj) {
            var mEvent : MouseEvent = new MouseEvent(MouseEvent.MOUSE_WHEEL, true, false,
                                                     mousePoint.x, mousePoint.y, obj,
                                                     event.ctrlKey, event.altKey, event.shiftKey,
                                                     false, Number(event.delta));
            obj.dispatchEvent(mEvent);
        }
    }
}
}

JavaScript example:.

 <script type="text/javascript">
        // For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. 
        var swfVersionStr = "10.1.0";
        // To use express install, set to playerProductInstall.swf, otherwise the empty string. 
        var xiSwfUrlStr = "playerProductInstall.swf";
        var flashvars = {};
        var params = {};
        params.quality = "high";
        params.bgcolor = "#ffffff";
        params.allowscriptaccess = "sameDomain";
        params.allowfullscreen = "true";
            params.wmode = "opaque";
        var attributes = {};
        attributes.id = "YOURAPP";
        attributes.name = "YOURAPP";
        attributes.align = "middle";

            if(window.addEventListener) {
                var eventType = (navigator.userAgent.indexOf('Firefox') !=-1) ? "DOMMouseScroll" : "mousewheel";            
                window.addEventListener(eventType, handleWheel, false);
            }

            function handleWheel(event) {
                var app = document.getElementById("YOURAPP");
                var edelta = (navigator.userAgent.indexOf('Firefox') !=-1) ? -event.detail : event.wheelDelta/40;                                   
                var o = {x: event.screenX, y: event.screenY, 
                    delta: edelta,
                    ctrlKey: event.ctrlKey, altKey: event.altKey, 
                    shiftKey: event.shiftKey}

                app.handleWheel(o);
            }

        swfobject.embedSWF(
            "YOURAPP.swf", "flashContent", 
            "100%", "100%", 
            swfVersionStr, xiSwfUrlStr, 
            flashvars, params, attributes);
        // JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
        swfobject.createCSS("#flashContent", "display:block;text-align:left;");

    </script>

Intercrop

Thanks for your reply. First I started taking out the param wmode (it was opaque by default)and it works fine in IE, Chrome and FF, but i read that if you do not put anything it sets as "window" and it's only recommended in win2. I would like to use my application in mobile devices(with android) so will it be a problem?? Then I tried what you said but I dont know anything about javascript so I put that code into my history.js and index-template(and the other code in my main.mxml) with not success.. could you explain me a little more? – Quatrain

Are you using Flash Builder to generator your HTML wrapper? – Intercrop

Ok, updated my answer with a block of javascript that FB typically generates. You can see the code added to it there. – Intercrop

Answer 2

This is also the same with 'wmode', 'transparent', remove the offending line from the javascript section of the embedded html if it was generated by Flash.. and everything is good in the world of firefox 40.0

Examen