我有一个canvas元素绝对定位在相同尺寸的 Flash 对象上。我希望能够单击该canvas元素并将该事件(或者更准确地说,该事件的模仿)发送到下面的 Flash 对象。
我向 Flash 对象添加了一个事件侦听器,因此我知道该事件已成功分派给 Flash 对象。问题是 Flash 对象根本不会对其做出反应(例如,单击巨大的“播放”按钮区域不会播放视频)。
Flash 对象可以以这种方式对事件做出反应吗?DOM 中的 Flash 是否有什么特别之处,需要 JavaScript 事件委托以外的其他东西来激活来自它的响应?
<!DOCTYPE html>
<html lang="zh">
<头部>
<meta charset="utf-8"/>
<title>将来自 DOM 元素的点击事件委托给底层 Flash 对象</title>
</head>
<正文>
<object type="application/x-shockwave-flash" name="StrobeMediaPlayback" data="assets/StrobeMediaPlayback.swf" width="640" height="480" id="StrobeMediaPlayback" style="visibility: visible; position :绝对;顶部:0;左侧:0;">
<param name="allowFullScreen" value="true">
<param name="wmode" value="透明">
<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">
</对象>
<script type="text/javascript">
var smp = document.getElementById('StrobeMediaPlayback');
smp.addEventListener('click', function (e) { console.log('CLICK'); }, false);
添加画布();
函数 addCanvas() {
canvas = document.createElement('canvas');
画布.宽度 = 640;
画布.高度 = 480;
canvas.style.position = '绝对';
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);
}
函数 evt(el, e) {
var event = document.createEvent('HTMLEvents');
event.initEvent(e.type, true, true);
for (var key in e) {
事件[键] = e[键];
}
el.dispatchEvent(事件);
}
</脚本>
</正文>
</html>