contenteditable div 内に編集できないコンテンツを入れようとしています。以下のコード レンダリングは、IE9 (および他のブラウザーも) でうまく機能します。しかし、IE9 だけでは奇妙な問題が発生しています。編集できないコンテンツは、IE9 でサイズ変更できます。私はこの振る舞いを望んでいません。そのため、スパンでクリック イベントをキャッチし、同じものを無視することで、スマートに行動することを考えました。その後、クリック イベント関数が呼び出されないという別の問題が発生しました。実際、そのスパンにイベントを関連付けることはできないようです。そして興味深いことに、スパンの contenteditable 属性を削除すると、イベントの取得が開始されました (ただし、コンテンツ編集不可が必要なため、これは役に立ちません)。
問題は、ユーザーが IE9 で以下のスパンのサイズを変更するのを防ぐにはどうすればよいかということです。
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('span').bind('click', function(e) {
e.preventDefault(); return false;
});
});
</script>
</head>
<body>
<div contenteditable="true">
<span contenteditable="false">non-editable</span>
editable div
</div>
</body>
</html>
興味深いことに、jsfiddle でこれを試したところ、問題が解決したことがわかりました。スパンは実際にサイズ変更できないことがわかりました。そして、上記のコンテンツをiフレームでレンダリングすると、希望どおりに動作することに気付きました（つまり、サイズ変更が無効になっています）。しかし、それは非常に大雑把な解決策です。不足しているより良い解決策があるはずだと期待しています。