div の上に SVG レイヤーがあり、SVG から contenteditable が true に設定されている div レイヤーにイベントをディスパッチして、div にフォーカスを当てたいと考えています。
html は次のとおりです。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="div1" contenteditable="true" style="width:100px; height:100px; border:solid 1px red; position:absolute; left:0; top:0;">
</div>
<svg height="100" version="1.1" width="100" xmlns="http://www.w3.org/2000/svg" style="position: absolute;left:50px; top:0; border:2px solid blue;pointer-events:none;" id="raphaelCanvasSvg"><desc></desc><defs/></svg>
</body>
</html>
基になる div にテキストが含まれている場合、イベントをディスパッチする必要がないことに気付きました。
グラフ表示は次のとおりです。
それ以外は：
ユーザーが下にテキストがない部分をクリックしても、イベントをディスパッチすることは可能ですか?
編集:
私の質問をさらに明確にするために、次のフィドルを使用して、IE9でFirefoxまたはChromeと同じ動作を取得することは可能ですか:
js fiddle