Событие мыши два раза срабатывает в Firefox при наведении на элемент. Привести к мерцанию. Есть ли способ изменить это мерцание?

Question

Событие мыши два раза срабатывает в Firefox при наведении на элемент. Привести к мерцанию. Есть ли способ изменить это мерцание?

0

HTML:

<ul class="navigate">  
<li>  
    <a title="Demo01" href="###">Demo01</a>  
    <ol>  
        <li><a title="Demo01Children01" href="###">Demo01Children01</a></li>  
        <li><a title="Demo01Children02" href="###">Demo01Children01</a></li>  
    </ol>  
</li>  
<li><a title="Demo02" href="###">Demo02</a></li>  
</ul>

Javascript:

$("ul.navigate>li").mouseenter(function(){  
  $(this).children("a").slideDown();  
  console.log("hover");  
}).mouseleave(function(){   
  $(this).children("a").slideUp();  
  console.log("out");  
});

Запустив html и JS в firefox, я вижу, что вывод "hover, out, hover" в firefox Firefox, когда мышь наводится каждый раз. На самом деле это не моя цель, которая выводит только "зависание". Доза любой может помочь мне решить проблему?

herman ho 22 окт. 2013, в 12:30

Источник

Теги:

jquery

mouse

3 ответа

Ещё вопросы

Ed Hinchliffe · Answer 1 · 2013-10-22T09-25-00.000Z

Я думаю, причина, по которой вы получаете мерцание, состоит в том, что li включает маркер. По мере ввода с левой стороны, вы попали в точку пули (вызвать in), то пустое пространство (вызвать out), затем текст iteself (триггер in раз).

Если вы добавите в демоверсию следующий CSS:

li{
   list-style-type: none;
}

Вы находите, что поведение исчезает?

С другой стороны: добавление поведения "зависания" на движущийся (скользящий) элемент, вероятно, очень плохая идея!

Кодепэн здесь, чтобы продемонстрировать.

Pandaiolo · Answer 2 · 2013-10-22T09-11-00.000Z

Без изменения разметки я немного изменил ваш javascript, чтобы выглядеть так:

$("ul.navigate > li").mouseenter(function(){  
    $(this).find("li").slideDown();  
    console.log("hover");  
}).mouseleave(function(){   
    $(this).find("li").slideUp();  
    console.log("out");  
});

Предлагаемый, я также применяю display: none для детского меню

Демо: http://jsfiddle.net/C2nVz/1/

Примечание. Демонстрация также включает list-style-type: none, как было предложено Ed, что вызывает несколько событий mouseover и mouseleave.

Fazi · Answer 3 · 2013-10-22T08-37-00.000Z

У вас проблемы, потому что вы скользящие элементы, которые быстро называют события снова! Взгляните на этот jsfiddle, где я прокомментировал вырезанные линии.

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

В основном я изменил свой код на:

$("ul.navigate>li").mouseenter(function()
{  
    //$(this).children("a").slideDown();  
    console.log("hover");  
}).mouseleave(function()
{   
   //$(this).children("a").slideUp();  
   console.log("out");  
});