js STUDIO

.mouseenter()

要素のmouseenterイベントにバインドします。また、mouseenterイベントを実行します。

このメソッドは、1つ目と2つ目は.bind('mouseenter', handler)への、3つ目は.trigger('mouseenter')への ショートカットです。

mouseenterは本来Internet Explorer固有のjavaScriptイベントです。 ただし、jQueryではこのイベントをシミュレートしてブラウザに関係なく使用することが出来ます。 このイベントは対象要素にマウスポインタが入ってきた際に、イベント通知を行います。 ほとんどの要素でこのイベントを受け取る事が可能です。

mouseenterイベントはイベントバブルを処理する方法がmouseoverと異なります。 詳細はデモをご覧ください。

.mouseenter( handler(eventObject) ) 1.0追加

戻り値:jQuery

要素のmouseenterイベントにバインドします。また、mouseenterイベントを実行します。

引数 説明
handler(eventObject) イベントが発生した際に、実行したい処理を関数として指定します。

.mouseenter( [eventData], handler(eventObject) ) 1.4.3追加

戻り値:jQuery

要素のmouseenterイベントにバインドします。また、mouseenterイベントを実行します。

引数 説明
[eventData] マップ値を指定することで、データをイベントハンドラーに渡すことが出来ます。
handler(eventObject) イベントが発生した際に、実行したい処理を関数として指定します。

.mouseenter() 1.0追加

戻り値:jQuery

mouseenterイベントを発生させます。

デモ

mouseenterとmouseoverが発生した回数を示すテキストに注目してください。 mouseoverは対象要素とその子要素に対してマウスが要素上に乗る度にイベントが発生しますが、 mouseenterは対象要素のみでしかイベントを発生させません。 

<!DOCTYPE html>
<html>
<head>
<style>
div.out {
  width:40%;
  height:120px;
  margin:0 15px;
  background-color:#D6EDFC;
  float:left;
}
div.in {
  width:60%;
  height:60%;
  background-color:#FFCC00;
  margin:10px auto;
}
p {
  line-height:1em;
  margin:0;
  padding:0;
  border: dotted 1px #FF0000;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="out overout"><p>move your mouse</p><div class="in overout"><p>move your mouse</p><p>0</p></div><p>0</p></div>
<div class="out enterleave"><p>move your mouse</p><div class="in enterleave"><p>move your mouse</p><p>0</p></div><p>0</p></div>
<script>
  var i = 0;
  $("div.overout").mouseover(function(){
    $("p:first",this).text("mouse over");
    $("p:last",this).text(++i);
  }).mouseout(function(){
    $("p:first",this).text("mouse out");
  });

  var n = 0;
  $("div.enterleave").mouseenter(function(){
    $("p:first",this).text("mouse enter");
    $("p:last",this).text(++n);
  }).mouseleave(function(){
    $("p:first",this).text("mouse leave");
  });
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM