2

さて、それで、私は私が何度も遭遇した少し奇妙な状況を持っています。私は以前に使用した（そしてそれ以来忘れてしまった）過度に複雑な解決策ではなく、単純で最良の解決策を探しています。

ほら、スライドショーがあります。スライドショーの上に浮かぶボタンもいくつかあります（ここに表示されます：http：//marsxplr.com/view-13378）

これで、ユーザーのマウスがスライドショーの上に移動したときにこれらのボタンが表示されるようになりました。ただし、ユーザーのマウスがボタンの上に置かれるとすぐに、mouseleaveが呼び出されます（マウスが技術的にはスライドショーの上にある場合でも）。これにより、マウスがボタンの上に移動するたびにボタンが消えますが、これは明らかに私が望んでいることではありません。

私はこれを解決するために、マウスオーバーを受信するたびに各ボタンが自分自身を再表示するようにしました。

しかし今、私たちは問題を抱えています...

ボタンはスライドショーの端にあります。つまり、mouseleaveが呼び出されると、次の2つのいずれかが発生しました。

A：マウスはボタンから外れましたが、スライドショーからは外れませんでした。スライドショーでmouseEnterが呼び出されました。これは、スライドショーが最終的にボタンをマウスリーブに非表示にするため、アクションを実行しないことを意味します。

B：マウスはスライドショーとボタンを完全に離れただけです。つまり、ボタンを非表示にする必要があります。

だから私の質問は、これらの2つの可能性の違いをどのように見分けるのですか？はい、はい、1つの解決策は、常にボタンを非表示にすることです-そして、ボタンを再表示するスライドショーに依存します...しかし、特定のブラウザでボタンonmouseleaveの前にスライドショーonmouseenterが呼び出されるのではないかと心配しています！！あなたがおそらく言うことができるように、これは問題を引き起こす可能性があります。実際、これについて考えると、私はすでにこれに影響を受けやすいです。たとえば、マウスがスライドショーからボタンに移動し、スライドショーのオンマウスリーブがオンマウスリーブの後に呼び出された場合、ボタンはまだ消えます...

つまり、簡単に言えば、次の2つのことのいずれかを知る必要があります。

  • これらのイベントが呼び出される保証された順序はありますか？
  • または、mouseleaveが呼び出されたときにマウスが実際にどこに行ったかを知る方法はありますか？

上記の例でわかるように、私はmootoolsを使用しているので、mootoolsソリューションで問題ありません。ただし、vanilla-jsソリューションも見るのは興味深いでしょう。

編集： 私のボタンはフロートされ、別のz-indexにあるため、親子DOM関係の標準操作は発生しません

4

1 に答える 1

2

標準の DOM イベントではそのような問題はありません。

順序に関しては、最も深い要素からドキュメント ルートまでバブリングします。

順序が逆の場合は、オプションの (false以下のコードの param を参照)キャプチャ フェーズもあります。ルートからカーソル下の各内部要素まで (マウス イベントの場合)。

元の要素のどの内部要素でイベントが実際に発生したかを確認するにtargetは、イベント オブジェクトのプロパティを調べます。

el.addEventListener('mouseout', function (e) {
    var target = e.target;
    if (target.classList.contains('whatever')) {
        // Do something
    }
}, false);

Georges Oates Larsen のコメントによると、relatedTargetいくつかの要素を含むイベント用に特別に設計された もあります。

于 2012-09-12T07:31:25.290 に答える