有关 javascript处理事件的一个问题。

阅读更多

有如下的HTML结构。现在需要用这个结构实现一个二级的树形菜单。 class="open"意味着打开，class="close"意味着关闭。

最开始用YUI 的event listener功能，我给 id="user-groups"的li设置一个click 的 callback funcation 比如 toggleFolder().

但是，当我点击包含在其中的子元素时，比如

My Groups

，仍旧回调了toggleFolder()。实际上此时我期望的操作是直接执行链接动作。

导致问题的根本原因是，我不能更细致的处理click事件。我试图找出click事件发生后在各个elements中传递的路径，但是对DOM和javascript太不熟悉了，没有搞定。

【

浏览器中事件传播模型有两个：1）事件捕获模型    2）事件冒泡  分别由微软、Netscape提出。 

DOM规定的标准事件模型是以上两种方式都支持。

参见《jQuery基础教程》第三章关于复合事件的论述。

】

     

         Groups
         

             
• My Groups

             
• Groups List

             
• Create a Group
               
         

      

 

     

     

         Tasks
         

             
• My Task

             
• Task List

             
• Create a Task
               
         

      

      ... ...

      ... ...

 

 

看了aTang推荐的jQuery,尝试了几次。终于通过以下语句实现了我需要的效果。即，只对"定义在

中的包含的"设置callback函数。
 $("li > a:has(span)").click(function() {

   ... ...

 });

 

 

jQuery提供了很好xPath方式的元素定位机制，而且有了一些很常用的UI组件。比起重量级的YUI很有诱惑力。

以前用过Rico的DataGrid也很不错。

 

*****************

1) How to find the parent node by jQuery.

    var pid = $("#myElement").parent().attr("id");

  如果是在事件的callback函数中，还可以这样： var node = $(this).parent();

 

2) 写非常非常简单的plugin，参见:    http://docs.jquery.com/Plugins/Authoring

  这个是关于firefox中fireBug的consle API:   http://getfirebug.com/console.html

  这个是一个基于jQuery的debug/logger login:          http://eroot.ssyenc.com/ep/js/jquery.debug.js;jsessionid=O0UIGnaSxvFFFowawZbgR5E5cIzD1mnZOYH2SRnkOcmkSONb3MFOxU6EPT5JljUL.ep-gw1_servlet_engine1

 

  今天菜单可以折叠了，代码：

 

 

jQuery.fn.toggleClass = function(classA, classB) {
  if (this.hasClass(classA)) {
  this.removeClass(classA);
  this.addClass(classB);
  }else {
  this.removeClass(classB);
  this.addClass(classA); 
  }
     return this;
};