IE6|7|8/9兼容模式 UL LI OnClick 事件问题

最新推荐文章于 2022-10-20 19:29:19 发布

piaolingzxh

最新推荐文章于 2022-10-20 19:29:19 发布

阅读量1.3w

点赞数

分类专栏： Js &amp; JS FrameWork 文章标签： ie javascript class function url xhtml

本文链接：https://blog.csdn.net/piaolingzxh/article/details/6298806

版权

Js & JS FrameWork 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

不管你使用JSP、ASP.NET、PHP等何种语言，只要生成了以下类似HTML。便会发现出现以下问题

<div> <ul>
<li class=" clearfix" οnclick='javascript:menuClick(this, "系统设置", "",1);'>
<h3>
<a href="javascript:void(0);" mce_href="javascript:void(0);"><div><img src="/Images/icon4.gif" mce_src="Images/icon4.gif"/></div>系统设置</a>
</h3>
</li>
<div class="child" style="display: none" mce_style="display: none" id="subMenuID4">
<ul>
<li class=" clearfix" οnclick='javascript:menuClick(this, "权限管理", "",3);'>
<h3><a href="javascript:void(0);" mce_href="javascript:void(0);"><img src="Images/icon4.gif" mce_src="Images/icon4.gif"/><div>权限管理</div></a></h3>
</li>
<div class="child" style="display: none" mce_style="display: none" id="">
<ul>
<li><a href="?page=31" mce_href="?page=31" class="">部门职位管理</a>
</li>
<li><a href="?page=32" mce_href="?page=32" class="">用户管理</a>
</li>
<li><a href="?page=33" mce_href="?page=33" class="">用友NC用户</a>
</li>
</ul>
</div>
</ul>
</div>
</ul>
</div>
<mce:script type="text/javascript"></mce:script>

在IE8、IE9正常模式及其他浏览器下，点击权限管理，this代表的是下图所示，仅触发该节点（LI）的Click事件

在Ie6,ie7,ie8兼容模式，IE9 兼容模式下菜单this代表的是下图所示，出发了该节点及其父节点的Click事件，在触发“权限管理”该节点时，权限管理节点展开，之后，触发“系统管理”节点Click事件，折叠整个“系统管理”节点。

解决方案：

<mce:script type="text/javascript"></mce:script>
<div> <ul>
   <li class=" clearfix" οnclick='javascript:menuClick(this, "系统设置", "",1),stopBubble(event);'>
                        <h3>
                            <a href="javascript:void(0);" mce_href="javascript:void(0);"><div><img src="/Images/icon4.gif" mce_src="Images/icon4.gif"/></div>系统设置</a>
                        </h3>
                    </li>
                    <div class="child" style="display: none" mce_style="display: none" id="subMenuID4">
                        <ul>
                            
                                    <li class=" clearfix" οnclick='javascript:menuClick(this, "权限管理", "",3),stopBubble(event);'>
                                        <h3><a href="javascript:void(0);" mce_href="javascript:void(0);"><img src="Images/icon4.gif" mce_src="Images/icon4.gif"/><div>权限管理</div></a></h3>
                                    </li>
                                    <div class="child" style="display: none" mce_style="display: none" id="">
                                        <ul>
                                            
                                                    <li><a href="?page=31" mce_href="?page=31" class="">部门职位管理</a>
                                                    </li>
                                                
                                                    <li><a href="?page=32" mce_href="?page=32" class="">用户管理</a>
                                                    </li>
                                                
                                                    <li><a href="?page=33" mce_href="?page=33" class="">用友NC用户</a>
                                                    </li>
                                                
                                        </ul>
                                    </div>
                                
                        </ul>
                    </div>
                
                
            </ul>
        </div>

推荐生成并成使用以下样式：

<!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>
    <title></title>
    <mce:script src="Scripts/jquery-1.4.1.js" mce_src="Scripts/jquery-1.4.1.js" type="text/javascript"></mce:script>
    <mce:script type="text/javascript"></mce:script>
</head>
<body>
    <ul>
        <li class=" clearfix" οnclick='javascript:menuClick(this),stopBubble(event);'>
            <h3>
                <a href="javascript:void(0);" mce_href="javascript:void(0);">系统设置</a>
            </h3>
            <ul class="child">
                <li class=" clearfix" οnclick='javascript:menuClick(this),stopBubble(event);'>
                    <h3>
                        <a href="javascript:void(0);" mce_href="javascript:void(0);">权限管理 </a>
                    </h3>
                    <ul class="child">
                        <li><a href="?page=31" mce_href="?page=31" class="">用户管理</a> </li>
                        <li><a href="?page=32" mce_href="?page=32" class="">角色管理</a> </li>
                        <li><a href="?page=33" mce_href="?page=33" class="">角色分配</a> </li>
                        <li><a href="?page=33" mce_href="?page=33" class="">权限分配分配</a> </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>