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!

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>