JavaScript事件冒泡传递及阻止传递

最新推荐文章于 2025-06-14 21:18:41 发布

原创最新推荐文章于 2025-06-14 21:18:41 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #IE #浏览器 #HTML #XHTML #ViewUI

本文详细介绍了JavaScript中的事件冒泡机制，并通过实例演示了如何在不同浏览器环境下阻止事件冒泡。此外，还讨论了如何获取触发事件的目标元素，以及特定标签如form的行为特点。

JavaScript事件冒泡传递：

</head>
<body onclick="Add('body事件触发')">

</body>

阻止事件冒泡传递：

//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
return false;

2.阻止浏览器的默认行为

JavaScript代码

//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.preventDefault )
//阻止默认浏览器动作(W3C)
e.preventDefault();
else
//IE中阻止函数器默认动作的方式
window.event.returnValue = false;
return false;

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html>
    <head>
        <title> </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" />
        <script type="text/javascript">
            function doSomething(obj, evt){
                alert(obj.id);
                var e = (evt) ? evt : window.event;
                if (window.event) {
                    e.cancelBubble = true;
                }
                else {
                    //e.preventDefault();
                    e.stopPropagation();
                }
            }
        </script>
    </head>
    <body>
        <div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow;">
            <p>
                This is parent1 div.
            </p>
            <div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
                <p>
                    This is child1.
                </p>
            </div>
            <p>
                This is parent1 div.
            </p>
        </div>
        <br/>
        <div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
            <p>
                This is parent2 div.
            </p>
            <div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
                <p>
                    This is child2. can't bubble.
                </p>
            </div>
            <p>
                This is parent2 div.
            </p>
        </div>
    </body>
</html>

form标签不支持冒泡，一个页面可以有多个form，但是form不能嵌套，如果form嵌套了，内嵌的form表单submit没有反应，最外层的form表单是可以提交的。

========================================================================

IE：中用window.event.srcElement取得当前元素
FF：中用event.target取得当前元素

document.onclick = function(e)    //要兼容FF的话，e这个参数一定要写上
{
    e                = window.event || e;
    var srcElement   =   e.srcElement || e.target;
    alert(srcElement.innerHTML);
}

<html>
<script>
function   getEvent()
{ var   i   =   0;
if(document.all) return   window.event;
func=getEvent.caller;
while(func!=null)
{
var   arg0=func.arguments[0];
if(arg0)
{
if(arg0.constructor==Event){
return   arg0;
}
}
func=func.caller;
}
return   null;
}

document.onclick   =   function(e)   //要兼容FF的话，这个参数一定要写上
{
    e   =   getEvent();
    var   srcElement   =   e.srcElement   ||   e.target;
    alert(srcElement.innerHTML);
}
</script>
<body>
window.event事件测试 <br>
<input   type= "button "   name= "b_test "   value= "测试 ">
</body>
</html>