3

絶対位置を持つ複数のdivを含むdivがあります。親divのマウス入力イベントを処理したいのですが、このフィドルを使用しています。 正しく機能しないフィドル は、この問題を処理する他の方法ですか？

HTMLマークアップ

<div id="content">
SYDNEY (Reuters) - An Australian man had his driving licence suspended for 10 months and was fined after he was
 <div class="abs"></div>
caught driving a scooter made of a motorised beer cooler capable of carrying several dozen drinks -- after knocking back a few.
</div>
<div id="output">   
</div>

脚本

$(function() {
var output = $("#output");
$("#content")
  .mouseenter(function(e){
    output.text("I'm in!");
}).mouseout(function(e) {
    output.text("I'm out!"); 
});
});​


#content {
background-color:#cccc99;   
position:relative;     
}
.abs{
 position:absolute;
 top:0px;
 left:70px;
 background-color:red; 
 width:30px;
 height:30px;   
 }​
4

2 に答える 2

8

あなたは途中で自分自身にいます。mouseoverandmouseoutイベントはバブルするため、イベントハンドラーが監視している要素の子要素の場合、mouseoverおよびイベントが複数回トリガーされます。mouseoutjQueryは、IEに触発さmouseenterれたイベントを提供しmouseleaveます。これらのイベントは、監視対象の要素自体のマウスイベントに対してのみトリガーされ、要素の子のイベントに対してはトリガーされません。mouseoverandmouseleaveイベントを使用すると、コードは期待どおりに機能します。この更新されたフィドルを参照してください。または、便利な構文でラップされた、イベントをhover内部的に使用するjQuery構文を使用します。mouseentermouseleave

于 2012-09-06T10:41:28.893 に答える
2

私が理解しているように-赤いdivの問題。そしてそれは正しいです。mouseenter/mouseoutの代わりにjQueryホバーを使用する

$(function() {
    var output = $("#output");
    $("#content")
      .hover(function(e){
        output.text("I'm in!");
    },function(e) {
        output.text("I'm out!"); 
    });
});​
于 2012-09-06T10:41:14.820 に答える