我有一个canvas元素绝对定位在相同尺寸的Flash对象上。我希望能够单击canvas元素，并将该事件--或者更正确地说，是该事件的模仿--分派到下面的Flash对象。
我向Flash对象添加了一个事件侦听器，这样我就知道事件被成功地调度到了Flash对象。问题是Flash对象对它没有任何反应（例如，在巨大的“播放”按钮的区域点击就不能播放视频）。
Flash对象能以这种方式对事件做出反应吗？DOM中的Flash是否有什么特别之处，需要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>
使用ExternalInterface在SWF和DOM之间进行通信。
您可以在SWF中创建一个函数，然后使用以下方法从JS调用ActionScript函数：
ExternalInterface.call( functionInsideYourSWF )
在您的情况下，当有人点击您的画布元素时，您会调用您的ActionScript函数，然后让Flash用您在ActionScript函数中定义的任何内容处理该点击事件，例如播放您的视频。
