jquery的冒泡事件

简介: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冒泡事件</title>
<script type="text/javascript" src="../js/jquery.js" ></script>
<script>
    $(function(){
            $("#content span").bind("click",function(){
                var txt=$("#msg").html()+"冒泡事件";
                $("#msg").html(txt);    
            })
            $("#content").bind("click",function(){
                var txt=$("#msg").html()+"冒泡事件";
                $("#msg").html(txt);    
            })
            $("body").bind("click",function(){
                var txt=$("#msg").html()+"冒泡事件";
                $("#msg").html(txt);    
            })
    })
</script>
</head>

<body>
    <div id="content">
        <span>我来触发冒泡</span>
    </div>
    <div id="msg"></div>
</body>
</html>

上面的代码中当你单击span标签的时候就会触发#content和body的单击事件。这种情况称为冒泡事件。

要消除这种情况可以使用事件对象。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冒泡事件</title>
<script type="text/javascript" src="../js/jquery.js" ></script>
<script>
    $(function(){
            $("#content span").bind("click",function(event){
                var txt=$("#msg").html()+"冒泡事件";
                $("#msg").html(txt);    
                event.stopPropagation();
            })
            $("#content").bind("click",function(){
                var txt=$("#msg").html()+"冒泡事件";
                $("#msg").html(txt);    
            })
            $("body").bind("click",function(){
                var txt=$("#msg").html()+"冒泡事件";
                $("#msg").html(txt);    
            })
    })
</script>
</head>

<body>
    <div id="content">
        <span>我来触发冒泡</span>
    </div>
    <div id="msg"></div>
</body>
</html>

 在阻止默认的事件是可以使用

event.preventDefault() ;或者

return false;或者

event.stopPropagation();

目录
相关文章
N..
|
20天前
|
JavaScript 前端开发
jQuery事件处理
jQuery事件处理
N..
11 1
|
25天前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
11 0
|
1月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
20 1
|
6月前
|
JavaScript 前端开发
前端基础 - JQuery事件切换(原来还有这种写法)
前端基础 - JQuery事件切换(原来还有这种写法)
29 0
|
7月前
|
JavaScript 前端开发
jQuery事件处理
jQuery事件处理
56 0
|
6月前
|
JavaScript 前端开发 索引
Javascript知识【jQuery:数组遍历和事件】
Javascript知识【jQuery:数组遍历和事件】
|
24天前
|
JavaScript 前端开发
jQuery中的事件与动画
jQuery中的事件与动画
9 0
|
25天前
|
JavaScript
jQuery动画与事件概念以及语法
jQuery动画与事件概念以及语法
8 0
|
3月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
39 0
|
3月前
|
JavaScript 前端开发
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
37 0