テーブル内のセルの寸法を変更せずに境界線効果を追加するために、その上に div を配置してテーブル セルを contenteditable=true にするという、やや奇妙なセットアップがあります。私が遭遇している問題は、セルの上の div がマウスダウン呼び出しをブロックしていることです - jQuery を介して div にバインドされたハンドラーが既にあります (div は選択されたセルの上にのみホバーするため、セルも同様です)。
divのjQueryハンドラーからイベント情報(マウス位置、event.dataなど)を渡しながら、テーブルセルでmousedownイベントをトリガーすることは可能ですか(セルの中央に配置され、各方向に2px大きいサイズがあります- css の「アウトライン」プロパティを使用することは、ここではオプションではありません。一部のセルには異なるサイズの境界線があり、それが外れてしまうためです)?
この場合、contenteditable セルに対してカスタム mousedown ハンドラーを呼び出そうとしているのではなく、マウス イベントを contenteditable セルに伝達するようにしています (選択の開始/終了の変更などを行うため)。
編集:私はこれを次の方法で試しましたが、ネイティブの contenteditable イベントをトリガーすることはまだ機能しません (選択カーソルを移動し、chrome 内でフォーカスを設定します [ただし、firefox では、contenteditable div を一度クリックしたことがある場合はフォーカスを設定します)前]):
var x = 10;
var y = 10;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window, 1, element.offsetLeft + x, element.offsetY + y, x, y, false, false, false, false, 0, null);
element.dispatchEvent(event);
この問題を示すフィドルは次のとおりです。