20:59 提问
JS下拉菜单，如何把mouseover变成mouseclick事件
function initMenu() {
assembleMenu(document.getElementById("navigation"));
function assembleMenu(uLParentNode) {
var theUL = uLParentNode.getElementsByTagName("ul")[0];
//在取得id为navigation的元素后，通过getElementsByTagName("ul")取得其下所有的UL元素。该函数所返回的列表包含了所有嵌套的多级的UL元素,但我们只关心第一个，因此，通过下标访问符[0]返回第一个UL元素，并存放于theUL变量中。
var theULChilds = theUL.childN
//取得theUL的所有子节点。在DOM2中，childNodes是节点是一个属性，它返回相应对象的下一级的所有子节点。与getElementsByTagName不同的地方是，它只返回紧邻下一级的所有子节点。
for (var i=0; i&theULChilds. i++) {
//开始遍历所返回的子节点。
if (theULChilds[i].tagName == "LI") { //我们只关心LI节点，因此，对于不同浏览器的返回结果，此行可统一地过滤掉其他类型的子节点。
var theLINode = theULChilds[i];
if (hasNextLevelMenu(theLINode)) {
setMouseActions(theLINode);
theLINode.firstChild.className = uLParentNode.tagName == "DIV" ? "downMenu" : "rightMenu";
assembleMenu(theLINode);
//如果有下级菜单，则将LI节点下第一个子节点的className属性设为downMenu。而LI节点的第一个子节点正好是A标签:
function hasNextLevelMenu(node) {
return node.getElementsByTagName("ul").length & 0;
function setMouseActions(node) {
node.onmouseover = function() {
this.getElementsByTagName("ul")[0].style.display = "block";
this.firstChild.style.backgroundColor= "#FFF";
node.onmouseout = function() {
this.getElementsByTagName("ul")[0].style.display = "none";
this.firstChild.style.backgroundColor= "#EEE";
按赞数排序
如果其他逻辑都没问题，那就把下面改一下就行了
node.onmouseover = function() {
this.getElementsByTagName("ul")[0].style.display = "block";
this.firstChild.style.backgroundColor= "#FFF";
node.onclick= function() {
this.getElementsByTagName("ul")[0].style.display = "block";
this.firstChild.style.backgroundColor= "#FFF";
其他相关推荐博客分类：
dunhuangmi的话：记得还是生手时面过某知名公司，题目之一是两个嵌套div，鼠标走对角线经过父与子时究竟会触发几个mouseover和mouseout事件？我当时答错了
，下面这篇文章解释了这个问题。
===================================================================
dunhuangmi
浏览: 13830 次
来自: 北京
感谢！！！！！！！！！！！！！！！！！！！！11后使用快捷导航没有帐号？
查看: 2957|回复: 0
javascript mouseout和mouseover事件详解
本帖最后由 antzone 于
21:11 编辑
javascript mouseout和mouseover事件详解:
标题中的两个事件推荐参阅以下两个方法:
（1）.mouseout参阅一章节。
（2）.mouseover参阅一章节。
标题中的两个事件是关于鼠标在元素中移出和移入的，算是比较常用的事件。
下面就简单介绍一下这两个事件的相关用法，希望能够对需要的朋友带来一定的帮助。
一.mouseout事件:
当鼠标移出指定元素或者指定元素的子元素时会触发此事件。
代码实例如下:
[HTML] 纯文本查看 复制代码运行代码&!DOCTYPE html&
&meta charset=&utf-8&&
&meta name=&author& content=&/& /&
&title&mouseout事件-蚂蚁部落&/title&
&style type=&text/css&&
&&width:200
&&height:200
&&background-color:
&&padding:50
&&width:50
&&height:50
&&background-color:
&script type=&text/javascript&&
var count=0;
window.onload=function(){
&&var box=document.getElementById(&box&);
&&var num=document.getElementById(&num&);
&&box.onmouseout=function(){
& & count=count+1;
& & num.innerHTML=
&div id=&box&&
&&&div id=&inner&&&/div&
&div&事件触发了&span id=&num&&&/span&次&/div&
以上代码中，当鼠标指针离开box元素或者它的子元素的时候就会触发mouseout事件。
不但鼠标指针离开当前元素的时候会触发此事件，而且离开子元素的时候也会触发此事件。
二.mouseover事件:
当鼠标指针移到指定元素或者移到指定元素的子元素时会触发此事件。
代码实例如下:
[HTML] 纯文本查看 复制代码运行代码&!DOCTYPE html&
&meta charset=&utf-8&&
&meta name=&author& content=&/& /&
&title&mouseout事件-蚂蚁部落&/title&
&style type=&text/css&&
&&width:200
&&height:200
&&background-color:
&&padding:50
&&width:50
&&height:50
&&background-color:
&script type=&text/javascript&&
var count=0;
window.onload=function(){
&&var box=document.getElementById(&box&);
&&var num=document.getElementById(&num&);
&&box.onmouseover=function(){
& & count=count+1;
& & num.innerHTML=
&div id=&box&&
&&&div id=&inner&&&/div&
&div&事件触发了&span id=&num&&&/span&次&/div&
以上代码中，当鼠标指针移入box元素或者它的子元素的时候就会触发mouseout事件。
不但鼠标指针移入当前元素的时候会触发此事件，而且移入子元素的时候也会触发此事件,不仅仅是一代子元素，对于所有的后代元素都是如此。
当鼠标移入或者移出子元素也会触发相应的事件在很多时候并非我们想要的效果，具体如何消除此中影响这里就不多介绍了，具体可以参阅一章节。
Powered by
Copyright &javascript动画快速click 或者 快速mouseover的时候出错？ - 知乎4被浏览335分享邀请回答0添加评论分享收藏感谢收起}