文章/答案/技术大牛

发布

社区首页 >问答首页 >Onblur事件绑定

问Onblur事件绑定
EN

Stack Overflow用户

提问于 2010-08-19 14:08:15

回答 2查看 2K关注 0票数 0

我正在学习Javascript的过程中，我正在尝试创建一个简单的下拉菜单。我想要的功能的一个例子可以在google主页上看到，在顶部菜单中有“更多”和“设置”下拉列表。具体地说，在菜单上单击一下，菜单就会消失。

也许onblur()不是要调用的正确函数。我不知道。我有这样的代码：

<!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 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> 
<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>

onblur事件根本不起作用。我不知道为什么。

(是的，我知道我不应该使用闭包)

javascript

events

回答 2

Stack Overflow用户

回答已采纳

发布于 2010-08-19 14:40:47

它不能触发是因为UL从未接收到焦点。仅仅展示它并不能给它带来关注。

解决这个问题有两种方法：

将tabindex添加到两个UL中，并在menu(..)函数中显示后调用myLayer.focus();。这并不是很好，因为从技术上讲，您并不想单击您的下拉列表，而且在UL.
Register周围绘制的焦点矩形将产生副作用，文档上的focus处理程序将隐藏任何可见的菜单。

票数 2

Stack Overflow用户

发布于 2010-08-19 14:57:57

如下所述：

http://www.devguru.com/technologies/ecmascript/quickref/evhan_onblur.html

onblur事件仅在以下元素上触发：

按钮、复选框、FileUpload、层、密码、单选、重置、选择、提交、文本、TextArea、窗口。

看起来您正在尝试在UL元素上使用该事件。相反，我建议在document上使用onclick事件来隐藏弹出窗口。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/3519155

复制

相似问题

问Onblur事件绑定
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Onblur事件绑定EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Onblur事件绑定
EN