下拉菜单闪烁，除了在Firefox中 [英] Drop down menu flickering except in firefox

问题描述

我遇到类似这样的问题？我可以将 onmouseout =hideAccount（）更改为 onmouseout =hideAccount.call（this）鼠标是否位于hideAccount函数内下拉菜单的子元素上？如果是这样，我会怎么做呢？作为参考，这里是hideAccount函数：

  function hideAccount（）{
 // alert（mouse out！ ）; 
 $（。account_container）。hide（）; 
 
  

解决方案

通过更改hideAccount函数为：

  function hideAccount（event）{
 var to = event.relatedTarget || event.toElement; 
 if（this.contains（to））{
 return; 
} 
 else {
 $（this）.hide（）; 
 
 
 $ / code> 

问题是除Firefox以外的每个浏览器都在检测作为一个鼠标移动从account_container移动到它的任何一个孩子。从技术上讲，当鼠标位于容器内的其中一个列表元素上时，出于某种原因，它不再位于容器本身之上。我猜firefox是唯一的浏览器，用来检查鼠标在隐藏之前是否已经移入子元素。是什么修正了它在javascript中检查我是否在尝试隐藏之前移动到子元素。

I'm having a problem similar to this one Drop Down Box Keeps flickering - JQuery and CSS with a drop down menu flickering when I move the mouse over it, except that it doesn't seem to happen in firefox. I put an alert in the mouseout event I have on it and found out that every time I moved from one <li> to another inside the menu the alert was triggered. Here is the important parts of the html code behind it.

<!--// HEADER BAR //-->
<div id="header">
<!--// NAVIGATION LINKS //-->
<div id="navigation">
    <!--// AUTHENTICATED //-->
    <div id="options" class="authenticated">
        <ul>
        <li><a href="javascript: toggleAccount()" class="account" title="Account">/</a></li>
        </ul>
    </div>
    <!--// ACCOUNT MENU //-->
    <div id="account_container" style="display: none;" onmouseout="hideAccount();">
        <div id="account">
            <ul>
            <li>Options...</li>
            </ul>
        </div>
    </div>
</div>
</div>

As you can see, the "account_container" div is the drop down menu. It first appears when the user clicks on the account li under authenticated and disappears either when the user clicks on the li again or mouses out. The navigation div has it's height set to 40px in the css, so I thought it might be a positioning problem like in the linked question, but setting the height to auto didn't fix it, and I can't take the account container out of the navigation bar because that will mess up it's positioning. Why is the browser detecting the shift from one menu item to another as a mouseout event and how can I prevent it?

EDIT:

Could I do something like Andy E's answer to this question? Could I change onmouseout="hideAccount()" to onmouseout="hideAccount.call(this)" and detect if the mouse is over a child element of the dropdown inside the hideAccount function? If so, how would I go about that? For reference, here's the hideAccount function:

function hideAccount(){
//alert("mouse out!");
$(".account_container").hide();
}

解决方案

Solved it by changing the hideAccount function to this:

function hideAccount(event){
var to = event.relatedTarget || event.toElement;
if(this.contains(to)){
    return;
}
else{
    $(this).hide();
}
}

The problem was that every browser except Firefox was detecting the move from the account_container to any of it's children as a mouseout. Technically, when the mouse is over one of the list elements inside the container, it is no longer over the container itself for some reason. I guess firefox was the only browser to check if the mouse had moved into a child element before hiding. What fixed it was putting in javascript to check to see if I was moving to a child element before trying to hide.

这篇关于下拉菜单闪烁，除了在Firefox中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！