我有一个 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>
1 回答
使用ExternalInterface在SWF和DOM之间进行通信 .
您可以在SWF中创建一个函数，然后使用以下命令从JS调用该ActionScript函数：
在您的情况下，当有人点击您的canvas元素时，您可以调用ActionScript函数，然后使用Flash处理该内部的Click事件，使用您在ActionScript函数中定义的任何内容，例如：播放你的视频 .