Internet Explorer 7のマウス出力でのぼかしの発生

Question

ユーザーがハイパーリンクを介してマウスを移動したときに表示されるポップアップ検索ボックスがあり、ユーザーが検索ボックスからマウスを離したときにボックスが消えます。これは正常に動作します。テキストボックスにフォーカスがある場合、テキストボックスのフォーカスが失われるまで、検索ボックスは表示されたままになります。カーソルがボックスの上にない場合、ボックスは非表示になります。これは、IE以外のすべてのブラウザでうまく機能します（IE7は具体的です）。 IEでは、テキストボックスのマウスアウト時に、テキストボックスのぼかしイベントが発生し、検索ボックスが効果的に隠されます。ここで私が書いたコードです：

<a class="search" href="#"><span>Search</span></a> 
<div class="open"> 
    <input id="tbSearch" type="text" /> 
    <a class="go" href="#"><span>Go</span></a> 
</div> 

Answer 1

問題は、あなたがそれらのバインドを解除せずにイベントを再バインドしていることのようだ：ここ

<script type="text/javascript"> 
    $(document).ready(function() { 
     //add mouseover event to the search button to show the search box 
     $(".search").mouseover(
      function() { 
       $(".open").show(); 
      }); 

     //add mouseout event to the search button to show the hide box 
     $(".search").mouseout(
      function() { 
       $(".open").hide(); 
      }); 

     //add mouseover event to the search box so it doesnt hide when the user attempts to click the box 
     $(".open").mouseover(
      function() { 
       $(".open").show(); 
      }); 

     //add mouseout event to the search box so it doesnt hides when the users mouse exits the box 
     $(".open").mouseout(
      function() { 
       $(".open").hide(); 
      }); 

     //don't ever hide the search box when the textbox has focus 
     $("#tbSearch").focus(
      function() { 
       $(".open").mouseout(
        function() { 
         $(".open").show(); 
        }); 
      }); 

     //hide the search box when the textbox loses focus 
     $("#tbSearch").blur(
      function() { 
       $(".open").hide(); 
       $(".open").mouseout(
        function() { 
         $(".open").hide(); 
        }); 
      }); 


    }); 
</script> 

とHTMLです。したがって、フォーカスとブラーイベントが何回起こったかによって、ボックスの表示と非表示を切り替える複数のイベントが発生します。私はIEで何らかの理由で失敗している理由を正確には分かっていませんが、解決策にはあまりにも多くの可動部分があるように見えますので、どこが失敗しているのかを正確に伝えるのは難しいです。

私はこれまで、テキストボックスの状態（フォーカスまたはぼかし）を維持する属性を使用して、このタイプのものを動作させることができました。これを試してみてください：

<script type="text/javascript"> 

$(function() { 

var showBox = function() { 
    $(".open").show(); 
}; 
var hideBox = function() { 
    if (!$(".open").attr("searching")) { 
     $(".open").hide(); 
    } 
}; 

$(".search").hover(showBox, hideBox); 
$(".open").hover(showBox, hideBox).hide(); 

    $("#tbSearch").focus(function() { 
    $(".open").attr("searching", "true"); 
    }).blur(function() { 
    $(".open").removeAttr("searching"); 
    $(".open").hide(); 
}); 
}); 

</script> 

Answer 2

<script type="text/javascript"> 
    $(document).ready(function() { 
     //add mouseover event to the search button to show the search box 
     $(".search").bind('mouseenter mouseleave',function(){ 
       $(".open").toggle(); 
     }); 

     //add mouseover event to the search box so it doesnt hide when the user attempts to click the box 
     $(".open").bind('mouseenter mouseleave',function(){ 
       $(".open").toggle(); 
     }); 

     //don't ever hide the search box when the textbox has focus 
     $("#tbSearch").focus(function() { 
       $(".open").show(); 
     }); 

     //hide the search box when the textbox loses focus 
     $("#tbSearch").blur(
      $(".open").hide(); 
     }); 

    }); 
</script>