jquery 停止事件冒泡方法

2种方法：

View Code

<!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>4-4-4</title>
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px; }
#content { width: 220px; border: 1px solid #0050D0;background: #96E555 }
span { width: 200px; margin: 10px; background: #666666; cursor: pointer;color:white;display:block;}
p {width:200px;background:#888;color:white;height:16px;}
</style>
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){// 为span元素绑定click事件
 $('span').bind("click",function(event){var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";$('#msg').html(txt);return false;});// 为div元素绑定click事件
 $('#content').bind("click",function(event){var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";$('#msg').html(txt);return false;});// 为body元素绑定click事件
 $("body").bind("click",function(){var txt = $('#msg').html() + "<p>body元素被点击.<p/>";$('#msg').html(txt);});
})
</script>
</head>
<body>
<div id="content">外层div元素<span>内层span元素</span>外层div元素
</div>
<div id="msg"></div>
</body>
</html>

第2种方法：

View Code

<script type="text/javascript">
$(function(){// 为span元素绑定click事件
 $('span').bind("click",function(event){var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";$('#msg').html(txt);event.stopPropagation();    //  阻止事件冒泡
 });// 为div元素绑定click事件
 $('#content').bind("click",function(event){var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";$('#msg').html(txt);event.stopPropagation();    //  阻止事件冒泡
 });// 为body元素绑定click事件
 $("body").bind("click",function(){var txt = $('#msg').html() + "<p>body元素被点击.<p/>";$('#msg').html(txt);});
})

jquery 停止事件冒泡方法相关推荐

js /jquery停止事件冒泡和阻止浏览器默认事件
var el = window.document.getElementById("a");el.onclick = function (e) {//如果提供了事件对象,则这是一个非 ...
js 停止事件冒泡阻止浏览器的默认行为
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 浏览器默认行为: 在form中按回车键就会提交表单:单击鼠标 ...
javascript 停止事件冒泡以及阻止默认事件冒泡
停止事件冒泡 function stopBubble(e) {// 如果提供了事件对象,则这是一个非IE浏览器if ( e && e.stopPropagation ) {// 因此它 ...
转载：jQuery停止动画——stop()方法的使用
jQuery停止动画--stop()方法的使用转载地址很多时候需要停止匹配元素正在进行的动画,比如,当鼠标选入元素时显示菜单,鼠标离开时隐藏下拉菜单,如果鼠标移入移出过快的话就会导致动画效果与鼠标 ...
Jquery 防止事件冒泡
Jquery 防止事件冒泡 1.简介在jquery事件中,如果指定对象和指定对象的父对象(依次往上类推)都定义了同样的事件,则jquery默认会往上传递,挨个执行. <!DOCTYPE htm ...
jQuery的事件冒泡，事件对象和图片跟随
** jQuery的事件冒泡,事件对象和图片跟随 ** 事件冒泡## 点击我是span这个,他会提示两个弹窗,第一个是我是span,第二个是我是div. 在span标签后加一个 return fl ...
jquery阻止事件冒泡的两种方法
事件的旅程: 当页面上发生一个事件时,每个层次上的DOM元素都有机会处理这个事件.以下面的页面模型为例: 1. <div class="foo">2. <span ...
JQuery之事件冒泡
JQuery 提供了两种方式来阻止事件冒泡. 方法一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
jQuery阻止事件冒泡
jQuery 提供了两种方式来阻止事件冒泡. 方式一: event.stopPropagation(); $("#div1").mousedown(function(event) ...

jquery 停止事件冒泡方法

jquery 停止事件冒泡方法相关推荐

最新文章

热门文章