请教一个冒泡事件的问题

代码如下

要实现的是：鼠标放在<p>标签上，背景换色

问题：

• 当鼠标移动到标签<p>时候，<p>标签中的子标签<a>没有背景色
  
• 当鼠标从<p>标签移动到所属<p>标签中的子标签<a>的时候，<p>标签背景颜色被还原了
  

用cssClass控制，始终更改p的class，然后在css的这个class中定义p与a的背景色

谢谢，第一个问题解决了，第二个问题还存在，这应该是冒泡事件的问题了把。

2.当鼠标从<p>标签移动到所属<p>标签中的子标签<a>的时候，<p>标签背景颜色被还原了

e.stopPropagation?e.stopPropagation()e.cancelBubble = true);加在onLine、outline中

代码如下，但是没有效果

这个问题涉及的知识点比较多，这里不做详细解释了，进一步了解自行搜索相关资料或阅读基础书籍：

// 检测一个元素是包含另一个元素
var contains = 'compareDocumentPosition' in document ?
    function(container, el) {
        return (container.compareDocumentPosition(el) & 16) == 16;
    }: 'contains' in document.documentElement ?
    function(container, el) {
        return container !== el && container.contains(el);
    }: function(container, el) {
        while (el = el.parentNode) {
            if (el === container) return true;
        }
        return false;
    };

// 检测元素是否支持 mouseenter/mouseleave 事件
if('onmouseenter' in document.documentElement){ // ie
       p.onmouseenter = function(){ /* handle this.className */ };
       p.onmouseleave = function(){ /* handle this.className */ };
}
// 以下判断 注册事件的元素 是否包含 事件关联元素，达到与上面的事件相同的效果
else{
       p.onmouseover = function(e){
              if( !(e = e.relatedTarget) || (this !== e && !contains(this, e)) ){ /* handle this.className */ }
       };
       p.onmouseout = function(e){
              if( !(e = e.relatedTarget) || (this !== e && !contains(this, e)) ){ /* handle this.className */ }
       };
}

[ 本帖最后由 zbm2001z 于 2010-5-10 20:34 编辑 ]

谢谢你。

楼主能把完整的代码给帖出来一份吗？供小弟们学习下。先谢谢了。

直接搜索dean 的addEvent
http://www.google.com.hk/search? ... mp;oq=&gs_rfai=

不用这么麻烦，最简单的办法用一个延时，鼠标移开p时延时10毫秒关闭，然后移到a上时清除延时就行了。

没这么麻烦吧

我说了始终更改p的class，那就是说在a上发生mouse event的时候，需要取parentNode，当然你还需要判断event.srcElement || event.target是p还是a

谢谢你，结果发现这么简单=    =，我居然研究了两天的时间，T      T....
我这样就解决问题了