Webページのマウスカーソルのすぐ下でHTMLタグを取得する方法を知っている人はいますか?私は新しいタイプのWYSIWYGに取り組んでおり、いくつかの真のドラッグアンドドロップ機能を実装したいと考えています(最近のWYSIWYGで一般的なカーソル位置への挿入ではありません)。そのためには、マウスボタンアップイベントが発生したときにメニュー項目を挿入する場所を知る必要があります。
複雑な問題かもしれないと私は理解しているので、アイデアも歓迎します。
Webページのマウスカーソルのすぐ下でHTMLタグを取得する方法を知っている人はいますか?私は新しいタイプのWYSIWYGに取り組んでおり、いくつかの真のドラッグアンドドロップ機能を実装したいと考えています(最近のWYSIWYGで一般的なカーソル位置への挿入ではありません)。そのためには、マウスボタンアップイベントが発生したときにメニュー項目を挿入する場所を知る必要があります。
複雑な問題かもしれないと私は理解しているので、アイデアも歓迎します。
@mightyuhuが提案したリンクに基づく例を次に示します。
document.onmouseover = function(e){
targ = getTarget(e);
targ.style.border = '1px solid #F00';
document.getElementById('currentElement').innerHTML = targ.tagName;
};
document.onmouseout = function(e){
getTarget(e).style.border = 'none';
};
function getTarget(e){
if (e.target) return e.target;
else if (e.srcElement) return e.srcElement;
}
これもあります:http://jsfiddle.net/5NFeX/3/ </ p>
実際、それほど複雑ではありません。イベントハンドラーをドキュメント自体にバインドしてから、イベントが発生した元のターゲットを調べる必要があります。例については、mightyuhuのコメントを参照してください。
最後に1つの提案:主要なJavaScriptフレームワークの1つを使用して、クロスブラウザーイベント処理コードを作成する手間を軽減します。