javascript - 子要素でmouseenterを使用するときに、親でmouseleaveをトリガーしない方法は?

Question

この仕事を得ることができませんでした。私の正確な状況と、私がやっていることをやろうとしている理由に行かずに、基本的な要約は次のとおりです。

親の中に 4 つの要素の子要素があります。私は現在mouseenter、子供たちに a を付けています:

$('.parent').on('mouseenter', '.child', function() {
    showSomething();
});

それから私は言おうとしている

$('.parent').on('mouseleave', function() {
    hideSameSomething();
});

しかしmouseenter、子mouseleaveの が親の を起動すると、厄介なちらつきが発生します。子ハンドラーを試しe.stopPropagation()ましたが、運がありません。mouseleave子要素に入るときに親イベントを発生させず、実際に親を離れるときにのみ発生させる方法はありますか?

Answer 1

両方を1つに組み合わせてみてください。

公式ドキュメント：http ：//api.jquery.com/on/#on-events-selector-data

$(".parent, .child").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    }
});

Answer 2

試す：

$('.parent .child').on("mouseenter", function() {

    showSomething();

    $(this).closest('.parent').on("mouseleave", function() {
        hideSameSomething();
    });

});