2

わかりましたので、最初に「window」のデフォルトの wmode に 2 つの問題がありました。Web ページのナビゲーション メニューは、flex/flash アプリの下に配置されます。もう 1 つの問題は、Flash アプリでスクロールするとページ全体がスクロールすることでした。

wmode を「opaque」に変更すると、ナビゲーション メニューの問題が修正され、Flash アプリの上に表示されるようになりました。それは素晴らしいことですが、今ではフラッシュアプ​​リでスクロールがまったくありません.

これは大きな問題であることは認識していますが、これらの問題の両方 (実際には 2.5 の問題) を解決するための解決策を見つけることができないようです。

A) ナビゲーション リンクが Flash アプリの上に表示されるようにして、非表示にならないようにします。B) Flash アプリケーション内でのスクロールを許可します。C) マウスがフラッシュ アプリの上にある場合、Web ページのスクロールを防止します。

素晴らしいアイデアがあれば。：） 前もって感謝します。

4

3 に答える 3

5

私が書いたときの意味：

wmode=transparentとwmode=opaqueは、mousewheelに関しては同じように動作します。

ほとんどのブラウザでは、どちらのモードもフラッシュでイベントをキャプチャしないということですMOUSE_WHEEL（IEがMOUSE_WHEELイベントを適切にキャプチャする唯一のブラウザであると思います）。

MOUSE_WHEEL解決策は、 JavaScriptを介してイベントをリッスンすることです。

//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他のマウスイベントにも問題があります。

于 2011-03-29T20:32:28.093 に答える
1

zzzzBov からの適切なリンクの後、実際に 3 つの問題すべてを解決することができました。これにより、マウスがフラッシュ アプリの上にある場合にのみ、マウスのスクロールをフラッシュ アプリに渡すことができます。また、ページ上の他の HTML 要素の上に表示されないように、Flash アプリを「不透明」モードのままにすることもできます。

この例はここにあります

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);
}
于 2011-03-29T22:54:52.090 に答える
1

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);
        }
    }
}
}
于 2011-03-29T20:04:19.547 に答える