wmode="opaque" 的问题和 wmmode="window" 的问题

Posted 2023-02-24

【中文标题】wmode="opaque" 的问题和 wmmode="window" 的问题

【英文标题】：Issues with wmode="opaque" and issues with wmmode="window"

【发布时间】：2011-07-25 13:08:00

【问题描述】：

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

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

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

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

如果你们有任何很棒的想法。 :) 提前致谢。

【问题讨论】：

MouseWheel not working when published movie has wmode="transparent"? 的可能重复项

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

我同意 zzzzBov。您确定您的 html 页面上的 JS 代码中的某些内容没有在到达 swf 之前吞噬鼠标滚轮并停止传播吗？

等等，所以你想让你的 Flash 应用在你使用浏览器的滚动条时滚动？

实际上，您所说的“我根本没有滚动”并不是很清楚。您可以单击 swf 中的任何内容吗？有可能一个“不可见”的 div 覆盖了 swf（部分或全部）并完全阻止了 div 遮挡的 swf 部分的输入。您是否绝对肯定 HTML 页面中没有任何“妨碍”？

【参考方案1】：

我写的时候的意思：

wmode=transparent 和 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 也有其他鼠标事件的问题。

【参考方案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);
        
    

【参考方案3】：

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

here

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

弹性

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