Internet Explorer에서 마우스 아웃에서의 발사 흐름. 7
-
03-07-2019 - |
문제
사용자가 하이퍼 링크 위에 마우스를 뿌릴 때 표시되는 팝업 검색 상자가 있습니다. 사용자가 검색 상자 밖으로 나가면 상자가 사라집니다. 이것은 잘 작동합니다. 텍스트 상자에 초점이 맞으면 텍스트 상자가 초점을 잃을 때까지 검색 상자가 표시되어야합니다. 이때 커서가 상자 위에 있지 않으면 상자가 숨어집니다. 이것은 IE를 제외한 모든 브라우저에서 잘 작동합니다 (IE7은 구체적입니다). IE에서 텍스트 상자의 블러 이벤트는 검색 상자를 효과적으로 숨기는 텍스트 상자의 마우스 아웃에서 시작됩니다. 다음은 내가 작성한 코드입니다.
<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이 있습니다 :
<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>
해결책
문제는 당신이 이벤트를 풀지 않고 이벤트를 반환하고있는 것 같습니다. 따라서 초점과 블러 이벤트가 몇 번이나 발생했는지에 따라 화재를 보여주고 숨기는 여러 이벤트가 끝납니다. 어떤 이유로 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>
다른 팁
<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>
제휴하지 않습니다 StackOverflow