Javascript主体OnClick_Javascript - Fatal编程技术网

Javascript主体OnClick

javascript

Javascript主体OnClick,javascript,Javascript,我正在学习Javascript，我正在尝试创建一个简单的下拉菜单。我想要的功能的一个例子可以在谷歌主页的顶部菜单中看到，带有“更多”和“设置”下拉菜单。特别是当您单击“关闭菜单”时，菜单将消失我需要在Javascript中的hideMenus函数中放置什么代码，以便在屏幕上任何位置发生单击时隐藏可见的uls <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

我正在学习Javascript，我正在尝试创建一个简单的下拉菜单。我想要的功能的一个例子可以在谷歌主页的顶部菜单中看到，带有“更多”和“设置”下拉菜单。特别是当您单击“关闭菜单”时，菜单将消失

我需要在Javascript中的hideMenus函数中放置什么代码，以便在屏幕上任何位置发生单击时隐藏可见的uls

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
<title>Untitled 1</title>  

<style type="text/css">  
a  
{  
    color:blue;  
}  

.info ul.submenu  
{  
    border: solid 1px #e0e0e0;  
    background-color: #fff;  
    position: absolute;  
    padding: 0;  
    z-index: 2;  
    display: none;  
}  

.info ul.submenu li  
{  
    display: block;  
    border-top: solid 1px #e0e0e0;  
    margin: 0px 10px 0 10px;  
}  

.info ul.submenu li a  
{  
    display: block;  
    padding: 7px 0px 6px 0;  
    color: #1177ee;  
    cursor:pointer;  
}  

</style>  

<script type="text/javascript">  

function hideMenus()
{
//TODO
}

function menu(id) {     
    var myLayer = document.getElementById(id);     

    myLayer.onblur = function() {       
        myLayer.style.display = 'none';   
    };   

    if (myLayer.style.display == "none" || myLayer.style.display == "") {     
        myLayer.style.display = "block";     
    } else {     
        myLayer.style.display = "none";     
    }     
}  

</script>  
</head>  

<body onclick="hideMenus();">  
<div class="info">     
     Some Text Boom A <a  onclick="menu('id1');">Link</a> | More text    
     <a onclick="menu('id2');">Another Link</a> | more text    
     <ul id="id1" class="submenu">     
       <li><a href="dfhdfh">A1</a></li>     
       <li><a href="aetjetjsd">A2 This is Long</a></li>     
       <li><a href="etetueb">A3</a></li>     
     </ul>     
    <ul id="id2" class="submenu">     
       <li><a href="dfhdfh">B1</a></li>     
       <li><a href="aetjetjsd">B2</a></li>     
       <li><a href="etetueb">B3</a></li>     
     </ul>     
  </div>    
</body>  
</html>


无标题1
A.
{  
颜色：蓝色；
}  
.info ul.子菜单
{  
边框：实心1px#e0；
背景色：#fff；
位置：绝对位置；
填充：0；
z指数：2；
显示：无；
}  
.info ul.子菜单li
{  
显示：块；
边框顶部：实心1px#e0；
利润率：0px 10px 0 10px；
}  
.info ul.子菜单li a
{  
显示：块；
填充：7px 0px 6px 0；
颜色：#1177ee；
光标：指针；
}  
函数hideMenus（）
{
//待办事项
}
功能菜单（id）{
var myLayer=document.getElementById（id）；
myLayer.onblur=函数（）{
myLayer.style.display='none'；
};   
如果（myLayer.style.display==“无”| | myLayer.style.display==”）{
myLayer.style.display=“block”；
}否则{
myLayer.style.display=“无”；
}     
}  
一些文字会发出隆隆声

我不想使用jQuery。

如果你在身体上点击一下，你可以在任何地方捕捉到点击。由于javascript事件传播模型，如果您单击任何元素上的任意位置，并且不阻止事件传播，它将到达主体并隐藏菜单

基本上，这意味着您希望捕获body onclick并使其隐藏菜单，因此当您单击页面的任何区域时，它将关闭菜单

但这隐藏了一些不必要的行为——当你点击按钮显示菜单时，菜单会显示出来，并在隐藏之后很快显示出来（当事件到达正文时）。为了防止这种情况发生，当您单击显示菜单的按钮时，您需要停止事件传播（您可以在下面我发布的代码中看到这是如何工作的）。代码显示了需要触摸的位置，以使其正常工作

// this function stops event e or window.event if e is not present from 
// propagating to other elements.
function stop_event(e) {
   if(!e) {
      e = window.event;
   }
   if (e.stopPropagation) e.stopPropagation();
   e.cancelBubble = true;
   if (e.preventDefault) e.preventDefault();
   e.returnValue = false;
   return false;
}

// now you just hide all the menus in your hideMenus
function hideMenus()
{
    //pseudocode!
    for all visible menus - hide // or if you want you can hide all menus, 
                                 // the hidden will remain hidden
}

现在是重要的部分

function menu(id) {     
    // your stuff here
    stop_event(); // this will stop the event going down to the body 
                  // and hiding it after showing it
                  // this means it will not flicker like: show-hide
}

最后，关于整个UL元素：

//partly pesudocode
ul.onclick = function() { stop_event(); }

要再次解释它的作用：

第一。将hideMenu函数挂接到body.onclick。这意味着，如果我们不停止事件，它将始终隐藏菜单

第二。当您单击菜单按钮时，您将显示菜单，然后我们将阻止事件进入正文。这样，body.onclick就不会启动，也不会在打开菜单后立即隐藏菜单

三,。ul.onclick意味着当我们单击菜单时，它不会隐藏自己（尽管如果您希望在单击菜单时隐藏菜单，您可以删除此部分）。

看起来您的设置相当不错。您可能会遇到一些事件冒泡问题（有关更多信息，请参阅）。这似乎超出了您当前问题的范围，因此我将给出您所要求的：

hideMenus()
{
    var uls = document.getElementsByTagName('ul'), i;
    for (i = 0; i < uls.length; i++)
    {
        if (uls[i].className === 'submenu' && uls[i].style.display !== 'none')
        {
            uls[i].style.display = 'none';
        }
    }
}

hideMenus（）
{
var uls=document.getElementsByTagName（'ul'），i；
对于（i=0；i


首先，我们在页面上获得所有的。然后，我们循环浏览所有菜单，检查它是否是一个子菜单，以及它当前是否显示。如果两者都是真的，那么我们就隐藏它
此代码存在两个故障：

如果uls有多个类（class=“animal submenu”
），则不会隐藏菜单
它将浏览页面上的所有。这并不十分有效，但这是唯一一种不需要跨浏览器支持getElementsByClass的方法

这些都不是大错误，特别是如果您只是使用它来学习javascript，并且如果您严格控制代码（即没有其他开发人员在使用它）。总而言之，这是一个很好的垫脚石
将来，我建议使用addEvent
——这是一个相当常见的函数，允许您向元素添加事件处理程序，而无需使用onclick=“…”
。它有两种不同的实现，但从您的角度来看，它们（几乎）都是一样的。以下是和的链接
祝你好运
 以下是我们在web应用程序中使用的下拉菜单逻辑：
<html>
<head>
    <title></title>
</head>
<body>
    <div style="position:relative;width:250px">
      <a id="link" href="javascript:" onclick="showDiv(this)">Show menu</a>
      <ul id="entries" style="display:none;background:#DEF;padding:0;margin:0">
        <li>item 1</li>
        <li>item 2</li>
      </ul>
      <input id="inp" style="position:absolute;left:-30px;width:0" />
    </div>

    <script>
        function showDiv(lnk){
            var entries = document.getElementById('entries'),
                inp = document.getElementById('inp'),
                nh = 'data-nohide';
            //show the entries
            entries.style.display = 'block';
            entries.removeAttribute(nh);
            inp.focus();
            //if mouse over, can't close it
            entries.onmouseover = function(){ 
                this.setAttribute(nh, true);
                inp.focus();
            }; 
            //if mouse out, can close it
            entries.onmouseout  = function(){ 
                this.removeAttribute(nh);
            };
            entries.onclick = function(e){
                //code when the user clicks on the menu...
                alert((e.target||e.sourceElement).innerHTML);
                this.style.display = 'none';
            };
            //if the user press ESC
            inp.onkeyup = function(e){
                if(e.keyCode === 27){
                    this.style.display = 'none';
                    this.removeAttribute(nh);
                }else{
                    //do something else with other keys(ie:down, up, enter)...
                    inp.focus();
                }
            };
            //click somewhere else input onblur
            inp.onblur = function(){
                if(!entries.getAttribute(nh)){
                    entries.style.display = 'none';
                    entries = inp = null;
                }
            };
        }
    </script>
</body>
</html>



项目1
项目2

函数showDiv（lnk）{
var entries=document.getElementById（'entries'），
inp=document.getElementById（'inp'），
nh=‘数据无隐藏’；
//显示条目
entries.style.display='block'；
条目。删除属性（nh）；
inp.focus（）；
//如果鼠标悬停，无法关闭它
entries.onmouseover=函数（）{
this.setAttribute（nh，true）；
inp.focus（）；
}; 
//如果鼠标退出，可以关闭它
entries.onmouseout=函数（）{
此。删除属性（nh）；
};
entries.onclick=函数（e）{
//用户单击菜单时的代码。。。
警报（（e.target | | e.sourceElement）.innerHTML）；
this.style.display='none'；
};
//如果用户按ESC键
inp.onkeyup=函数（e）{
如果（例如keyCode===27）{