Question

我有一个canvas元素，位于相同尺寸的Flash对象上。我希望能够点击canvas元素并将该事件 - 或者更确切地说，模仿该事件 - 发送到下面的Flash对象。

我向Flash对象添加了一个事件监听器，因此我知道该事件已成功分派给Flash对象。问题是Flash对象根本没有对它作出反应（例如，点击巨大'play'按钮的区域不会播放视频。）

Flash对象能否以这种方式对事件做出反应？在DOM中是否有一些特殊的东西需要除了JavaScript事件委托以外的东西来激活它的响应？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Delegating click events from a DOM element to an underlying Flash object</title>
    </head>
    <body>
        <object type="application/x-shockwave-flash" name="StrobeMediaPlayback" data="assets/StrobeMediaPlayback.swf" width="640" height="480" id="StrobeMediaPlayback" style="visibility: visible; position: absolute; top: 0; left: 0;">
            <param name="allowFullScreen" value="true">
            <param name="wmode" value="transparent">
            <param name="flashvars" value="src=http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv&autoPlay=false&verbose=true&controlBarAutoHide=false&controlBarPosition=bottom&poster=assets/images/StrobeMediaPlayback.png">
        </object>
        <script type="text/javascript">
            var smp = document.getElementById('StrobeMediaPlayback');
            smp.addEventListener('click', function (e) { console.log('CLICK'); }, false);
            addCanvas();
            
            function addCanvas() {
                canvas = document.createElement('canvas');
                canvas.width = 640;
                canvas.height = 480;
                canvas.style.position = 'absolute';
                canvas.style.top = '0px';
                canvas.style.left = '0px';
                canvas.addEventListener('click', function (e) { evt(smp, e); }, false);
                ctx = canvas.getContext('2d');
                document.body.appendChild(canvas);
            }
            
            function evt(el, e) {
                var event = document.createEvent('HTMLEvents');
                event.initEvent(e.type, true, true);
                for (var key in e) {
                    event[key] = e[key];
                }
                el.dispatchEvent(event);
            }
        </script>
    </body>
</html>

Answer 1

使用ExternalInterface在SWF和DOM之间进行通信。

您可以在SWF中创建一个函数，然后使用以下命令从JS调用该ActionScript函数：

ExternalInterface.call( functionInsideYourSWF )

在您的情况下，当有人点击您的canvas元素时，您可以调用ActionScript函数，然后使用Flash处理该内部的Click事件，使用您在ActionScript函数中定义的任何内容，例如：播放你的视频。

可以单击Flash对象中的事件处理程序来响应来自另一个DOM元素的JavaScript委派的事件吗？

1 个答案: