Размытие стреляет по мышке в Internet Explorer 7 - PullRequest
Новая
       20

Размытие стреляет по мышке в Internet Explorer 7

0 голосов
/ 30 апреля 2009

У меня есть всплывающее окно поиска, которое отображается, когда пользователь наводит курсор мыши на гиперссылку, когда пользователь выходит из окна поиска, поле исчезает. Это отлично работает. Когда текстовое поле имеет фокус, поле поиска должно оставаться видимым до тех пор, пока текстовое поле не потеряет фокус, и в этот момент окно будет скрыто, если курсор не находится над ним. Это хорошо работает во всех браузерах, кроме 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>

Ответы [ 2 ]

1 голос
/ 01 мая 2009

Кажется, проблема в том, что вы связываете события, не отменяя их. Таким образом, в конечном итоге возникают множественные события, которые запускают показ и скрытие окна в зависимости от того, сколько раз происходило событие фокуса и размытия. Я не совсем уверен, почему в 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>
0 голосов
/ 01 мая 2009 
<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>
...