2

次のコードを検討してください (jsfiddle here )

<span class="content">foo</span><span class="closeButton">close</span>
<span class="content">bar</span><span class="closeButton">close</span>​

.content { padding: 0 4em; }
.closeButton:hover { display:inline; }
.closeButton {
    display: none;
    position: relative;
    left: -3em;
}

​$('.content').on('mouseenter', function() {
    $(this).next().css('display', 'inline');
}).on('mouseleave', function() {
    $(this).next().css('display', '');    
});
$('.closeButton').on('click', function() {
    $(this).prev().remove().end().remove();
});
​

要素「foo」の上にマウスを置くと、jQuery の「mouseenter」イベントを使用して closeButton が表示されます。閉じるボタンをクリックすると、「foo」が削除され、要素「bar」がマウスの現在の位置の下に移動します。ただし、「マウス入力」イベントは、マウスを再度移動するまで「バー」に対して発生しません。

「バー」がこのイベントをすぐに受け取るようにする良い方法はありますか?

この場合、繰り返しクリックするだけで複数の要素を削除できることを考慮してください。クリックの合間にマウスが揺れると、ユーザー エクスペリエンスが低下します。

私の場合、うまくいかないニアアンサーがいくつかあることを知っています。

1) closeButton 要素は、それが閉じる 'foo' 要素内に実際には含まれていません。これは、ページ上の他のスクリプトとの競合を回避するために必要であり、css :hover を使用して最初にボタンを表示することを防ぎます。これはjsfiddleで機能します。:(

2) DOMMutationEvents、それらの非推奨、およびサポートの相対的な欠如について少し知っています。それらと、それらをエミュレートするためのさまざまなタイマーハックなどを避けたいと思います。この問題が十分に具体的であることを願っています (マウスの位置に関連するイベント) ドキュメントがリフローし、マウス ターゲットが変更されたときに起動します。特に、明らかに CSS エンジンはそれを認識しており、適切に処理します。

3) jQuery を使用してページを変更しています。「remove()」を呼び出したときにイベントを発生させるようにモンキー パッチを適用し、他のすべてのイベントを確実に「調整」することができます。これは機能する可能性がありますが、削除によって DOM の大部分が影響を受ける可能性があるため、実際にコンテキストをハンドラーに渡すことは困難です。その結果、マウスの下にある 1 つの要素に対して 1 つのイベントを処理するだけでなく、多くの余分な作業を行う必要がありました。これは今は機能するかもしれませんが、後で管理できなくなります。

アドバイスをありがとう。

4

1 に答える 1

3

document.elementFromPoint（event.pageX、event.pageY）と呼ばれる気の利いたメソッドがあります

ここのJSfiddleで私がどのように使用したかがわかります:) http://jsfiddle.net/7zEZw/1/

于 2012-06-12T02:48:06.097 に答える