1. ホーム
  2. jquery

[解決済み] jQuery .onとhoverの使い分けは可能ですか?

2022-03-15 08:17:39

質問

私は <ul> には、最初のページロードの後に javascript が入力されます。 現在 .bindmouseovermouseout .

プロジェクトはちょうどjQuery 1.7にアップデートされたところなので、私は .on で動作させることができないようです。 hover . を使用することは可能ですか? .onhover ?

EDIT : 私がバインドしている要素は、ドキュメントが読み込まれた後に、javascriptで読み込まれます。 そのため on でなく、単に hover .

解決方法は?

( を使用する必要がある場合は、この回答の最後の編集をご覧ください。 .on() をJavaScriptで実装した要素で使用します。 )

JavaScriptを使用していない要素に使用します。

$(".selector").on("mouseover", function () {
    //stuff to do on mouseover
});

.hover() は独自のハンドラを持ちます。 http://api.jquery.com/hover/

複数の処理を行いたい場合は、それらをチェーンして .on() ハンドラのようになります。

$(".selector").on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

以下の回答によると hover.on() , でも。

新しいコードでは強く推奨されませんが、このように 擬似イベント名 "hover" は、次の文字列の省略形として使用されます。 "mouseenter mouseleave"。これは、これらの この2つのイベントは、ハンドラがevent.typeを検証して がmouseenterなのかmouseleaveなのか。を混同しないでください。 hover"擬似イベント名と.hover()メソッドは、1つだけ受け入れることができます。 または2つの関数があります。

また、これを使うことによるパフォーマンス上の利点はなく、単に mouseenter または mouseleave . 私が提供した答えは、より少ないコードで、このようなことを達成するための適切な方法です。

EDIT

この質問が回答されてからしばらく経ちますが、少しは浸透してきたようですね。 上記のコードはまだ有効ですが、私は最初の回答に何かを追加したいと思いました。

私は mouseentermouseleave (コードの中で何が起こっているのかを理解するのに役立つ)。 .on() で以下のように書くのと同じです。 hover()

$(".selector").hover(function () {
    //stuff to do on mouse enter
}, 
function () {
    //stuff to do on mouse leave
});

元の質問では、どのようにすれば正しく使用できるかを尋ねているので on()hover() の使い方を修正しようと思いました。 on() を追加する必要があるとは思いませんでした。 hover() というコードがありました。

2012年12月11日編集

以下の新しい回答は、その詳細です。 .on()div がJavaScriptで入力されている場合。 たとえば、あなたが div を使用して、jQueryの .load() イベントのようなものです。

(function ($) {
    //append div to document body
    $('<div class="selector">Test</div>').appendTo(document.body);
}(jQuery));

上記のコードで .on() は成り立たないでしょう。 代わりに、次のようにコードを少し修正する必要があります。

$(document).on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
}, ".selector"); //pass the element as an argument to .on

このコードは、JavaScriptが組み込まれた要素が .load() イベントが発生しました。 引数を適切なセレクタに変更するだけです。