Internet Explorer 7에서 마우스 아웃시 흐려짐이 발생합니다.

Question

사용자가 하이퍼 링크를 통해 마우스를 움직일 때 표시되는 팝업 검색 상자가 있습니다. 사용자가 검색 상자 밖으로 마우스를 가져 가면 상자가 사라집니다. 이것은 잘 작동합니다. 텍스트 상자에 포커스가있을 때 텍스트 상자가 포커스를 잃을 때까지 검색 상자가 보이게되어 커서가 상자 위에 있지 않으면 상자가 숨겨집니다. 이것은 IE (IE7은 구체적이지 않음)를 제외한 모든 브라우저에서 잘 작동합니다. IE에서는 텍스트 상자의 마우스 아웃시 텍스트 상자의 blur 이벤트가 발생하여 검색 상자가 숨겨집니다. 여기에 내가 작성한 코드입니다 :

<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>