wmode =「opaque」的問題和wmmode =「window」的問題

Question

好吧，所以首先我有2個問題與默認wmode的「窗口」。我的網頁導航菜單將在我的flex/flash應用程序下進行。另一個問題是在Flash應用程序中滾動時整個頁面將滾動。

我將wmode更改爲「不透明」，這解決了導航菜單的問題，現在它們顯示在Flash應用程序上方。這很好，但現在我沒有在Flash應用程序中滾動。

我意識到這是一個大問題，但我似乎無法找到解決這兩個問題（實際上是2.5個問題）的解決方案。

我想A）導航鏈接顯示在Flash應用程序上方，以便它們不被隱藏; B）允許在Flash應用程序內滾動;和C）如果鼠標在閃光燈應用程序上，則防止滾動網頁。

如果你們有任何想法，那就太棒了。 ：） 提前致謝。

Answer 1

當wmode =「opaque」（它實際上在IE中工作時，不是Firefox或Chrome，可能不是Safari或Opera）修復Flex應用程序中的MouseWheel。這也修復了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 2

當我寫我的意思：

的wmode =透明&的wmode =不透明行爲相同，只要鼠標滾輪。

是，兩種模式並不在大多數瀏覽器閃光燈捕捉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提醒閃光，一個MOUSE_WHEEL事件發生。

wmode=transparent & wmode=opaque也有其他鼠標事件的問題。

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

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

時發佈的影片具有的wmode [不靈鼠標滾輪