使用Popup窗口创建无限级Web页菜单(6)-阿里云开发者社区

开发者社区> 唐玄奘> 正文

使用Popup窗口创建无限级Web页菜单(6)

简介:
+关注继续查看
 在使用...(5)中用Show()把菜单显示出来了,Show中的大部分大代码都很好理解,这节主要说一下event的处理,在Show的末尾我们使用了一个AttachEvents()方法来attach鼠标和键盘的事件,该方法的代码如下:
None.gifMenu.prototype.AttachEvents = function(menuHtml)
None.gif{
None.gif    var menuObj = __MenuCache__[menuHtml.uniqueId];
None.gif    if ( menuObj.m_IsEventAttached )
None.gif    {
None.gif        return;
None.gif    }
None.gif    var doc = menuObj.m_Popup.document;
None.gif    for ( var i=0 ; i < menuObj.m_Items.length ; ++i )
None.gif    {
None.gif        var mItem = menuObj.m_Items[i];
None.gif        var trItem = doc.getElementById(mItem.m_Id);
None.gif        if ( mItem.m_Action && !mItem.m_ChildMenu )
None.gif        {
None.gif            if ( !mItem.IsSeparator() )
None.gif            {
None.gif                trItem.attachEvent('onclick', mItem.m_Action);
None.gif                trItem.attachEvent('onclick', Menu.HideAllPopups);
None.gif            }
None.gif        }
None.gif        if ( mItem.m_ChildMenu )
None.gif        {
None.gif            trItem.attachEvent('onmousedown', this.InnerShow);
None.gif        }
None.gif        if ( !mItem.IsSeparator() )
None.gif        {
None.gif            trItem.attachEvent('onmouseover', this.ActiveItem);
None.gif        }
None.gif    }
None.gif    menuHtml.attachEvent('onmouseout', this.ResumeItem);
None.gif    if ( doc )
None.gif    {
None.gif        doc.attachEvent('onkeydown', this.Keydown);
None.gif    }
None.gif    menuObj.m_IsEventAttached = true;
None.gif};
    方法中的第一句:var menuObj = __MenuCache__[menuHtml.uniqueId];,就是我在使用...(3)中说过的为什么要用__MenuCache__。因为menuObj是JavaScirpt类实例,而menuHtml是DHTML的UI元素,他们在使用innerHTML赋值传递时失去了彼此的引用联系,而__MenuCache__里mapping了它们的一对一关系。Menu类中还有很多方法中都用到了类似__MenuCache__[id]这样的调用,而所有用到这种方法的地方,都是为了把object和html映射起来。

    由于attachEvent方法的操作类似一个压栈的过程,执行它是不会检查同一个事件是否已被attach了的,所以需要自己记录菜单是否已attach事件的标志,在执行attach操作前判断。第二个要注意的是,在向事件上attach处理方法时,由于方法都是Menu类内部的方法,都是使用this.MethodName来引用的,而在这些方法的实现中,是不能使用this这个关键字来指代Menu类的当前实例的,我下面用this.ResumeItem的调用来说明,ResumeItem()的源代码如下:
None.gifMenu.prototype.ResumeItem = function(evt)
None.gif{
None.gif    if ( !evt || evt.toElement )
None.gif    {
None.gif        return;
None.gif    }
None.gif    var menuHtml = FindParentElement(evt.srcElement, 'TABLE');
None.gif    if ( !menuHtml.uniqueId ) 
None.gif    {
None.gif        menuHtml = FindParentElement(menuHtml.parentElement, 'TABLE');
None.gif    }
None.gif    var menuObj = __MenuCache__[menuHtml.uniqueId];
None.gif    if ( menuObj.HasSubMenuExpanded() )
None.gif    {
None.gif        return;
None.gif    }
None.gif    if ( menuObj.m_ShowTimer )
None.gif    {
None.gif        window.clearTimeout(menuObj.m_ShowTimer);
None.gif        menuObj.m_ShowTimer = null;
None.gif    }
None.gif    menuObj.__resumeItem();
None.gif};
    这个menuHtml.attachEvent('onmouseout', this.ResumeItem);事件是用来处理鼠标离开了最末级子菜单时,取消菜单条目的选种状态的。随便点开一个系统菜单,把鼠标移到任何一个条目上,该条目就会被highlight,不做任何点击操作,把鼠标移出菜单,该菜单中被highlight的item就会被resume,这个方法就是实现这个效果的。它的关键是判断 !evt || evt.toElement 是否不为真。

    继续说this引用的问题,当这个onmouseout事件被触发时,方法默认的第一个参数是其window上的event,这个我在使用...(3)中说过,还用红色标识出来了的。而这时ResumeItem里的this引用的是当前菜单所在的父IE窗口,所以获得菜单实例的方法仍然是从__MenuCache__里去取(代码中加下划线的语句)。同时除了ResumeItem,所有在AttachEvents里的attach的方法,InnerShow、ActiveItem和Keydown等,里面都不会有对this的调用(除非确实要引用父IE窗口)。 


本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用 SAP WebIDE 创建 SAP Fiori Elements 应用
使用 SAP WebIDE 创建 SAP Fiori Elements 应用
8 0
lua使用io.open跨平台文件夹遍历匹配查找
-- Desc :实现在LUA_PATH中的lua文件中遍历寻找没用到PNG_PATH路径下的png图片,并将其打印出来。 -- Date :12:49:28 2014-09-04 1 print("Lua Script Start") 2 3 function getFileName( path ) 4 len = string.
826 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
8271 0
使用 Webix 创建 Email 客户端
Webix 是一个JavaScript UI 库,提供了多达88个UI小部件和功能丰富的 CSS/HTML5 JavaScript 控件。使用 Webix 可以有效地加快 Web 应用的开发。文本将演示了如何通过 Webix 框架,来创建一个 Email 客户端原型。
4709 0
我的Qt作品(5)使用Qt+Halcon实现模板匹配;支持ROI框选/橡皮擦功能
我的Qt作品(5)使用Qt+Halcon实现模板匹配;支持ROI框选/橡皮擦功能
20 0
使用c#制作网络爬虫,检查站点可访问性
  前几天自己负责的网站出现了不能访问的问题,系统监控程序通过告警将这一信息告诉了管理员。管理员找到了我,告诉我站点不能正常访问。后来问题查明,是负载均衡器出了问题。自己在检查站点的时候,发现有些图片不能正确显示,原因是图片链接无效。
742 0
+关注
641
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载