javascrpt: hierarchy of event handlers (ie only)

朋友遇到了一个问题，下面的代码总是先触发tr的onclick事件，然后才触发href_click()方法

1 <tr onclick="tr_click();">
2     <td><a href="javascript: href_click();">click mea>td>
3 tr>

为了解决这个问题，我修改了tr_click的实现方法，

 1  function  tr_click(sender) {
 2       var  element  =  event.srcElement;
 3       var  invodeClick  =   false ;
 4 
 5       while  (element  !=  sender) {
 6           if  (element.onclick  !=   null   ||  element.tagName  ==   " A " ) {
 7              invodeClick  =   true ;
 8               break ;
 9          }
10          element  =  element.parentElement;
11      }
12 
13       if  ( !  invodeClick) {
14          alert( " tr " );
15      }
16  }
17 

event.srcElement是触发事件的源对象，通过不断调用 parentElement属性，寻找父对象直至找到sender对象(也就是调用tr_click方法的对象)，如果调用sender的子对象包含onclick事件处理，或者源对象是A，则不调用sender的onclick事件处理方法。

不知道我说明白了没有，也许你看了全部的测试代码就清楚了；我没有找到更简便的方法，如果你有更方便的方法请告知；另，这段代码只在ie下好用，firefox不好用。

 1  DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
 2  < html >
 3  < head >
 4  < title >  event hierarchy test  title >
 5  < script  language ="JavaScript" >
 6 
35  script >
36  head >
37 
38  < body >
39  < table  border ="1"  width ="400px" >
40  < tr  onclick ="tr_click(this);" >
41       < td  onclick ="td_click();"  width ="100px" >   td >
42       < td >< a  href ="javascript: a_click();" > click me (href) a > td >
43       < td >< a  href ="#"  onclick ="a_click();" > click me (onclick event) a > td >
44       < td >   td >
45  tr >
46  < tr  onclick ="tr_click(this);" >
47       < td  colspan ="43" >
48           < table  border ="1"  width ="100%" >
49           < tr >
50               < td  onclick ="td_click();" >   td >
51           tr >
52           < tr >
53               < td >< a  href ="javascript: a_click();" > click me (href) a > td >
54           tr >
55           < tr >
56               < td >   td >
57           tr >
58           table >
59       td >
60  tr >
61  table >
62  body >
63  html >

对了，为了说明对象的层次关系，我在table中嵌套了另一个table，在这种情况下tr_click的实现仍然好用；另外，按照以下代码修改tr_click，再分别点击 click me (href)和 click me (onclick event)，这回应该明白为什么总是先调用tr_click方法了吧。

 1  function  tr_click(sender) {
 2      alert("tr");
 3 }

转载于:https://www.cnblogs.com/gucsnet/archive/2006/02/13/329995.html