Javascript正文OnClick

Question

我正在學習Javascript，我正在嘗試創建一個簡單的下拉菜單。 我可以在頂部菜單的Google主頁上看到我所需功能的一個示例，其中包含“更多”和“設置”下拉列表。 特別是當您單擊菜單時，菜單消失。

我需要在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>

我不想使用jQuery。

Answer 1

看起來你有一個相當不錯的設置原樣。 您可能會遇到一些事件冒泡問題（有關更多信息，請查看PPK的事件訂單文章）。 這似乎超出了您當前問題的范圍，所以我只會告訴您您的要求：

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';
        }
    }
}

首先，我們得到頁面上的所有<ul>。 然后，我們遍歷所有這些，檢查它是否是子菜單，以及它當前是否顯示。 如果兩者都是真的，那么我們隱藏它。

這段代碼有幾個錯誤：

如果uls有多個類（ class="animal submenu" ），那么它不會隱藏菜單
它將查看頁面上的所有 <ul>。 這不是很有效，但如果沒有對getElementsByClass跨瀏覽器支持，這是唯一的方法。

這些並不是很大的錯誤，特別是如果你只是用它來學習javascript，並且如果你密切控制你的代碼（即沒有其他開發人員正在研究它）。 總而言之，它是一塊很好的踏腳石。

在將來，我建議使用addEvent - 一個相當常見的函數，允許您在不使用onclick="..."情況下向元素添加事件處理程序。 它有幾種不同的實現，但它們（幾乎）從你的角度來看都是一樣的。 以下是Dean Edwards版本和John Resig版本的鏈接

祝好運！

Answer 2

這或多或少是我們在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>

訣竅是使用具有focus的input字段，當它失去它時，觸發onblur並關閉菜單。

mouseover ， mouseout用於防止用戶單擊菜單中的項目時觸發onblur 。

要像鏈接上的打開/關閉一樣具有切換效果，我想需要2個相互隱藏的鏈接。

Answer 3

如果你單擊身體，你可以在任何地方捕獲一個點擊。 由於javascript事件傳播模型，如果您單擊任何元素上的任何位置並且您沒有停止傳播事件，它將到達正文並隱藏菜單。

所以基本上這意味着你想捕捉身體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(); }

再次解釋這是做什么的：

1。 您將hideMenu函數掛鈎到body.onclick。 這意味着如果我們不停止事件，它將始終隱藏菜單。

第2位。 單擊菜單按鈕時，顯示菜單，然后我們停止事件進入正文。 這樣，body.onclick將不會觸發，並且在我們打開它之后它不會立即隱藏菜單。

3。 ul.onclick意味着當我們點擊菜單時菜單不會隱藏（雖然如果你想在單擊菜單本身時隱藏菜單，你可以刪除這部分）。

Javascript正文OnClick

問題描述

3 個解決方案

解決方案1
1 已采納 2010-08-19 12:42:59

解決方案2
0 2010-08-19 19:42:46

解決方案3
-1 2010-08-19 12:21:42

Javascript正文OnClick

問題描述

3 個解決方案

解決方案1 1 已采納 2010-08-19 12:42:59

解決方案2 0 2010-08-19 19:42:46

解決方案3 -1 2010-08-19 12:21:42

解決方案1
1 已采納 2010-08-19 12:42:59

解決方案2
0 2010-08-19 19:42:46

解決方案3
-1 2010-08-19 12:21:42