3

重複の可能性:
指定された位置で要素を取得する - JavaScript

任意のマウス位置 (x、y) で要素を検出するにはどうすればよいですか?

mouseenter/を使用mouseleaveして、ホバーしたアイテムを強調表示しています。残念ながら、マウスが暗黙的に移動すると、これらのどちらも起動せず、これにより間違ったアイテムが強調表示されます。暗黙的にマウスを動かす例としては、矢印キーまたはトラック パッドを使用したページのスクロールがあります。

ここでコメント付きの動作デモを見ることができます: http://jsfiddle.net/bkG2K/6/

回避策の私の考えは、マウスの位置を時々、または可能であればスクロールした直後にチェックし、現在のマウス座標に基づいてホバー状態を更新することです。しかし、X、Y を指定して DOM 要素を見つける方法がわかりません。

アイデア？根本的な問題に対するより良い解決策がある場合は、お気軽に!

4

2 に答える 2

1

elementFromPoint(x, y)ビューポートの座標 x、y にある要素を返すネイティブ JavaScript メソッドを使用できます。

elementFromPoint w3c ドラフトを参照

そして、コードサンプル:

<html>
<head>
<title>elementFromPoint example</title>

<script type="text/javascript">

function changeColor(newColor)
{
 elem = document.elementFromPoint(2, 2);
 elem.style.color = newColor;
}
</script>
</head>

<body>
<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
</body>
</html>

setInterval()要素のホバー イベントを継続的にチェックするために使用できますが、推奨されません.hover(...)。代わりに css を使用して、アプリケーションのパフォーマンスを向上させてください。

于 2011-06-02T11:35:56.233 に答える
0

内部の実装が異なるかどうかはわかりませんが、目的のメソッドを達成しようとしているのは.hover(...)、状態が変化するたびに 2 つのコールバックを実行することです。

setInterval()または、カーソルの位置でイベントをシミュレートすることもでき.mousemove()ます (ただし、これは一種のハックであり、できるだけ少ない人に公開する必要があるため、ブラウザー チェックを実行し、問題のあるブラウザーでのみ使用する必要があります)。

于 2011-06-02T11:17:52.423 に答える