我有一个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>