mouseenter(fn)


version 1.0 以降

解説

マッチした要素のmouseenterイベントに、イベントハンドラをバインドします。
bind("mouseenter", handler)のヘルパイベントです。

通常、mouseenterイベントは、マウスなどのポインティングデバイスが要素に入った時に発生します。 このイベントは、イベントバブリングを補足しませんので、子孫要素に入った時には発生しません。

引数

  • fn
    Function: mouseenterイベントにバインドするイベントハンドラ関数
    イベントハンドラ関数の第1引数に渡されるイベントオブジェクトには、イベントが発生した位置を表すプロパティとして、以下の4つが設定されます。

    イベントハンドラ関数の第1引数に渡されるイベントオブジェクトには、イベントが発生した位置を表すプロパティとして、以下の4つが設定されます。
    プロパティ名説明
    pageXページの左上を0とした横位置
    pageYページの左上を0とした縦位置
    clientXブラウザのドキュメント表示領域の左上を0とした横位置
    clientYブラウザのドキュメント表示領域の左上を0とした縦位置

戻り値

  • jQuery: jQueryオブジェクト

関連


例1:マウスがボックスに入ると、mouseenterイベントが発生したカウントとマウスの位置が表示されます。
ボックスの子孫要素に入った時には発生しません。

function cursorInfo(event) {
    $("#info span:first").text(event.pageX)
        .nextAll("span:first").text(event.pageY)
        .nextAll("span:first").text(event.clientX)
        .nextAll("span:first").text(event.clientY)
}

var m = o = v = e = l = 0;
$("#box")
    .mousemove(function(){
        $("span:first", this).text(++m); cursorInfo(event);
    })
    .mouseover(function(){
        $("span:eq(1)", this).text(++v); cursorInfo(event);
    })
    .mouseout(function(){
        $("span:eq(2)", this).text(++o); cursorInfo(event);
    })
    .mouseenter(functionfunction(){
        $("span:eq(3)", this).text(++e); cursorInfo(event);
    })
    .mouseleave(function(){
        $("span:last", this).text(++l); cursorInfo(event);
    });

#box

mousemove: 0
mouseover: 0
mouseout: 0
mouseenter: 0
mouseleave: 0

child element

#info

pageX: -
pageY: -
clientX: -
clientY: -