2

テーブル内のセルの寸法を変更せずに境界線効果を追加するために、その上に 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);

この問題を示すフィドルは次のとおりです。

http://jsfiddle.net/CoryG/SgBy4/

4

1 に答える 1

0

アイデア1

セルの上に配置している div が DOM 内のセルの子でない場合、イベントはセルに伝達されません。

イベントを div からセルに渡したい場合は、jQuery のトリガー メソッドを試すことができます。

イベントがトリガーされた後に入力フィールドにフォーカスするには、これを追加できます。

// queued and invoked after currently pending event handlers are finished
setTimeout(function(){$('#inputID').focus();}, 0);

デモ: http://jsfiddle.net/louisbros/9JNPr/


アイデア2

編集中に div で編集領域をブロックする必要があるため、以下を追加してみてください。

pointer-events: none;

あなたのdivのcssに。マウス イベントは、div によって完全に無視されます。

デモ: http://jsfiddle.net/louisbros/9JNPr/4/

Caniuse: http://caniuse.com/pointer-events

于 2013-03-29T08:46:01.483 に答える