Вопросы Теги

Отменить действие mouseleave [дубликат]

Если вам нужно отсортировать список на месте, вы можете использовать метод Sort , передав делегат Comparison : 

objListOrder.Sort((x, y) => x.OrderDate.CompareTo(y.OrderDate));

Если вы предпочитаете создавать новую, отсортированную последовательность, а не сортировать на месте, вы можете использовать метод LINQ OrderBy , как указано в других ответах.

1
задан King Julien 9 February 2011 в 20:49
поделиться

6 ответов

Есть несколько небольших проблем с вашим кодом. Тот, который кусает вас прямо сейчас, заключается в том, что вы не очищаете тайм-аут BBB при входе в AAA. Вы можете исправить это, добавив обработчик clearTimeout в обработчик mouseover AAA.

Во-вторых, безопаснее очищать этот тип таймаута, прежде чем устанавливать его каждый раз, чтобы у вас не было тайм-аута отслеживание перезаписывается, если произойдет что-то неожиданное. (Всегда безопасно очищать тайм-аут, даже если он недействителен или уже произошел.)

Наконец, хотя это скорее всего проблема только в вашем примере кода, вы пропускаете time в глобальный объект. ; -)

Попробуйте это вместо: 

$(document).ready(function() {
    var time;

    function show() {
        $("BBB").css({'display':'block'});
    }

    $("AAA").each(function() {
        $(this).mouseover(function() {
            clearTimeout(time);
            show();
        });

        $(this).mouseleave(function() {
            clearTimeout(time);
            time = setTimeout("hide()", 200);
        });

        $("BBB").mouseleave(function() {
            clearTimeout(time);
            time = setTimeout("hide()", 200);
        });

        $("BBB").mouseenter(function() {
            clearTimeout(time);
        });
    });
});

function hide() {
    $("BBB").css({'display':'none'});
}
2
ответ дан Ben Blank 19 August 2018 в 16:50
поделиться

У вас неправильный код :) Попробуйте следующее: 

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #AAA, #BBB {
            width:100px;
            height:100px;
            border:1px solid #000;
        }
    </style>
</head>
<body>
    <div id="BBB">
        BBB
    </div>
    <div id="AAA">
        AAA
    </div>
    <script src="http://www.google.com/jsapi"></script>
    <script>
        //VISIBLE 
        function hide() {
            $("#BBB").css({'display':'none'});
        }
        function show() {
            $("#BBB").css({'display':'block'});
        }

        // Load jQuery
        google.load("jquery", "1");
        google.setOnLoadCallback(function() {
            // NOT VISIBLE
            // function hide() {
            //     $("#BBB").css({'display':'none'});
            // }
            // function show() {
            //     $("#BBB").css({'display':'block'});
            // }

            $(document).ready(function() {
                var time;

                $("#AAA").each(function() {
                    $(this).mouseover(function() {
                        show();
                    });

                    $(this).mouseleave(function() {
                        time = setTimeout("hide()", 200);
                    });

                    $("#BBB").mouseleave(function() {
                        setTimeout("hide()", 200);
                    });

                    $("#BBB").mouseenter(function() {
                        clearTimeout(time);
                    });
                });
            });


        });
    </script>
</body>
</html>
0
ответ дан beshkenadze 19 August 2018 в 16:50
поделиться
  • 1
    и для доступа к & lt; div id = "ID_NAME" & gt; & lt; / div & gt; используйте $ ('# ID_NAME') не $ ('ID_NAME') – beshkenadze 9 February 2011 в 21:00

Сначала поставьте B внутри A: 

<div class="a">
    AAA
    <div class="b">
        BBB
    </div>
</div>

Затем отбросьте свой javascript и упростите жизнь с помощью простого старого css: 

.b
{
    display: none;
}
.a:hover .b
{
    display: block;
}

Edit - Вот живой пример с использованием техники CSS: http://jsfiddle.net/gilly3/sBwTa/1/

Редактировать. Если вы должны использовать JavaScript, просто добавьте clearTimeout(time) - show(). Но, давайте также упростим ваш код: 

$(function()
{
    var time = 0;
    function show()
    {
        clearTimeout(time);
        $("BBB").show(); // Existing jQuery that does $().css("display","block")
    }
    function hide()
    {
        time = setTimeout(function()
        {
            $("BBB").hide();
        }, 200);
    }
    $("AAA,BBB").mouseenter(show).mouseleave(hide);
});
3
ответ дан gilly3 19 August 2018 в 16:50
поделиться
  • 1
    Как насчет этих надоедливых пользователей IE6? Это не сработает, пока мышь тоже закончится. Если бы вы добавили .b:hover {display: block}. Тем не менее, большинство реальных реализаций в конечном итоге происходит со сценарием, поэтому вы можете позволить себе немного времени, прежде чем скрывать элементы, и подсказка может следовать за мышью (если она захочет) – Juan Mendes 9 February 2011 в 21:57
  • 2
    Оберните все это в <a>. Или не беспокойтесь ... Действительно ли пользователи IE6 важны? Шутки в сторону. Возможно, если вы пишете программное обеспечение онлайн-банкинга. В противном случае взвешивайте финансовые стимулы к сохранению этих пользователей и стоимости вашего времени для их поддержки. – gilly3 9 February 2011 в 22:02
  • 3
    Конечно, он будет работать с мышью над b: jsfiddle.net/gilly3/sBwTa – gilly3 9 February 2011 в 22:09

Вот сценарий, который работает со значащими именами функций, которые должны облегчить понимание того, что происходит. Вы должны отменить скрытие от mouseenter в обоих div. 

$(document).ready(function() {
  var timerId, delay = 300;
  var a = $("#A"),
    b = $("#B");

  function stopHide() {
    clearTimeout(timerId);
  }

  function showTip() {
    b.show();
  }

  function startHide() {
    timerId = setTimeout(function() {
      b.hide();
    }, delay);
  }
  a.mouseenter(showTip).mouseenter(stopHide).mouseleave(startHide);
  b.mouseenter(stopHide).mouseleave(startHide);
});
div {
  border: 2px dashed firebrick;
  float: left;
  font-size: 50pt;
  font-weight: bold;
  padding: 5px;
  margin: 5px;
}

#B {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='A'> A </div>
<div id='B'> B</div>

Ранее на http : //jsfiddle.net/92jbK/1/

2
ответ дан Juan Mendes 19 August 2018 в 16:50
поделиться

одна альтернатива - использовать подсказку jQuery http://flowplayer.org/tools/tooltip/index.html

, тогда вы можете просто сделать это: 

$('#A').live(function() {
      $(this).tooltip({
      relative: true,
      position: 'top center',
      delay: 200,
      effect: !$.browser.msie ? 'fade' : 'toggle',
      fadeInSpeed: 100,
      fadeOutSpeed: 50,
      predelay: 500
    });
  });

, и вы просто создаете подсказку div b of class

0
ответ дан Kalendae 19 August 2018 в 16:50
поделиться

Объявлено time за пределами всего этого?

Он не находится в той же области действия в двух функциях, которые у вас есть выше, поэтому это не та же переменная, что и вызов clearTimeout() никакого эффекта.

Объявите его за пределами обоих с помощью var time;, чтобы они ссылались на одну и ту же переменную.

0
ответ дан Orbling 19 August 2018 в 16:50
поделиться
Другие вопросы по тегам:

Похожие вопросы: