js 如何阻止事件冒泡。

Question

以下代码中的 alert() 应该是在 鼠标离开 divPromptBox 时才被执行，但是当鼠标碰到其中的 <a> <div> <span>都会被触发，网上翻了翻也没找到比较好的可以通用的解决方法，特来此一问。
－－－－－－
<div id="divPromptBox" class="PromptBox" style="width: 50%;" onmouseout="alert('');">
<a href="#">...</a>
<div>...<div>
<span>...</span>
</div>

Answer 1

                function stopBubble(e){
                    //一般用在鼠标或键盘事件上
                    if(e && e.stopPropagation){
                        //W3C取消冒泡事件
                        e.stopPropagation();
                    }else{
                        //IE取消冒泡事件
                        window.event.cancelBubble = true;
                    }
                };<div id="divPromptBox" class="PromptBox" style="width: 50%;" onmouseout="alert('');stopBubble(this);"> 

Answer 2

1、cancelBubble（HTML DOM Event 对象属性） ：如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。2、stopPropagation（HTML DOM Event 对象方法）：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。3、 preventDefault（HTML DOM Event 对象方法）通知浏览器不要执行与事件关联的默认动作。

Answer 3

<script>
if(typeof(HTMLElement)!="undefined")
HTMLElement.prototype.contains=function(obj)
{
  if(obj==this)return true;
  while(obj=obj.parentNode) if(obj==this) return true;
  return false;
}
function doit(evt){
evt = window.event?window.event:evt;
var obj = evt.toElement || evt.relatedTarget
if(document.getElementById("divPromptBox").contains(obj)) return;
alert('');
}
</script>
<div id="divPromptBox" class="PromptBox" style="width:50%;background:#ccc" onmouseout="doit(event);">
<a href="#">... </a>
<div>... <div>
<span>... </span> 
</div>