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

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

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

但是，当我点击包含在其中的子元素时，比如<li><a href="myGroup.jsp">My Groups</a></li>，仍旧回调了toggleFolder()。实际上此时我期望的操作是直接执行链接动作。

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

【

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

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

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

】

<ul>

     <li id="user-groups" class="close">
         <a href="group.jsp"><span>Groups</span></a>
          <ul>
              <li><a href="myGroup.jsp">My Groups</a></li>
              <li><a href"listGroup">Groups List</a></li>
              <li><a href="createGroup" >Create a Group</a></li>               
          </ul>
      </li>

 

     

     <li id="user-tasks" class="open">
         <a href="task.jsp"><span>Tasks</span></a>
          <ul>
              <li><a href="myTask.jsp">My Task</a></li>
              <li><a href"listTask">Task List</a></li>
              <li><a href="createTask" >Create a Task</a></li>               
          </ul>
      </li>

      ... ...

      ... ...

<ul>

 

 

看了aTang推荐的jQuery,尝试了几次。终于通过以下语句实现了我需要的效果。即，只对"定义在<li>中的包含<span>的<a>"设置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

 

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

<script type="text/javascript" >
    $(document).ready(function() {
         $("li > a:has(span)").click(function() {
               var node = $(this).parent().toggleClass("open", "close");  
               $.log("aaaclick user Groups ID=" + node.attr("id")); 
               return false;
         });
   });
</script>

 

 

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;
};