wmode=“不透明”的问题以及 wmmode="window" 的问题

Question

好的，首先我遇到了“窗口”默认 wmode 的两个问题。我的网页导航菜单将位于我的 Flex/Flash 应用程序下。另一个问题是在 Flash 应用程序中滚动时整个页面都会滚动。

我将 wmode 更改为“不透明”，这解决了导航菜单的问题，因此现在它们显示在 Flash 应用程序上方。那太好了，但现在我在 Flash 应用程序中根本没有滚动功能。

我意识到这是一个大问题，但我似乎找不到任何解决方案来解决这两个问题（实际上是 2.5 个问题）。

我想要 A) 让导航链接显示在 Flash 应用程序上方，这样它们就不会被隐藏； B) 允许在 Flash 应用程序内滚动； C) 如果鼠标位于 Flash 应用程序上方，则阻止网页滚动。

如果你们有任何想法那就太好了。 ：） 提前致谢。

Answer 1

我写的时候的意思是：

wmode=透明& wmode=opaque 的行为与鼠标滚轮相同。

问题是这两种模式在大多数浏览器中都不能捕获flash中的MOUSE_WHEEL事件（我相信IE是唯一能够正确捕获MOUSE_WHEEL事件的浏览器）。

解决方案是通过 JavaScript 监听 MOUSE_WHEEL 事件：

//ie handles wmode=transparent correctly
//every other browser uses addEventListener
if ( !document.attachEvent )
{
  //console.log('attached');
  window.addEventListener('DOMMouseScroll', scrollListener, false);
  window.addEventListener('mousewheel', scrollListener, false);
}

scrollListener( e )
{
  var delta
  if ( e.wheelDelta )
  {
    delta = e.wheelDelta / 40;
  }
  else if ( e.detail )
  {
    delta = -e.detail;
  }
  //do stuff with delta
}

然后您需要使用 ExternalInterface.addCallback 为 JS 设置回调，以提醒 Flash >MOUSE_WHEEL 事件发生。

wmode=transparent & wmode=opaque 对于其他鼠标事件也有问题。

Answer 2

修复了当 wmode="opaque" 时 Flex 应用程序中没有 MouseWheel 的问题（它实际上在 IE 中有效，只是在 Firefox 或 Chrome 中不起作用，可能在 Safari 或 Opera 中也不起作用）。这也修复了 Firefox 和其他浏览器之间不同的 MouseWheel 滚动速率。

将此 JavaScript 添加到您的包装器中：
。

        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);
        }

并将这个支持类放入您的主 MXML 文件中（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);
        }
    }
}
}

Answer 3

在 zzzzBov 的良好链接之后，我实际上能够解决所有三个问题。这让我可以将鼠标滚动传递给 Flash 应用程序，而仅当鼠标位于 Flash 应用程序上方时才执行此操作。它还允许我的 Flash 应用程序保持“不透明”模式，这样它就不会位于页面上其他 HTML 元素之上。

可以在此处找到这样的示例

Javascript

$(document).ready(function () {
        $('#MapSWFDiv').bind('mousewheel', function (event) {
            HandleMouseWheel(event);

            return false;
        });

        //Firefox
        $('#MapSWFDiv').bind('DOMMouseScroll', function (event) {
            HandleMouseWheel(event);

            return false;
        });
    });

    function HandleMouseWheel(event) {
        var app = GetMapSWF();
        if (app) {
            var delta = event.wheelDelta ? event.wheelDelta : event.detail;

            var o = { x: event.clientX, y: event.clientY,
                delta: delta,
                ctrlKey: event.ctrlKey, altKey: event.altKey,
                shiftKey: event.shiftKey
            }

            app.HandleMouseWheel(o);
        }
    }

Flex

protected function appComplete():void  {
    ExternalInterface.addCallback("HandleMouseWheel", HandleMouseWheel);
}

//This function passes the event to my map object. You could actually pass 
//it to any objects in the app that you would like. Also note that I am 
//getting the mouse coords from the flex app vs the actual browser. This keeps 
//everything local.
public function HandleMouseWheel(event:Object): void {
    var mEvent:MouseEvent = new MouseEvent(MouseEvent.MOUSE_WHEEL, true, false,                     
        this.contentMouseX, this.contentMouseY, map, 
        event.ctrlKey, event.altKey, event.shiftKey, 
        false, -Number(event.delta));
    map.dispatchEvent(mEvent);
}