阻止冒泡事件demo

<!doctype html>
<html>
<head>
<style>
.box{width:200px;height:200px;background-color:green;}
span{display:block;width:100px;height:30px;background-color:skyblue;}
</style>
<script src="jquery-1.7.2.min.js"></script>
<meta charset="utf-8">
<title>阻止冒泡事件demo</title>
</head>

<body>
<!--点文档关闭菜单,点按钮打开菜单。因为按钮在文档内,所以会产生事件冒泡使得在点按钮打开菜单时无法正常执行。所以我们需要阻止事件冒泡。-->
<span>按我</span>
<div class="box">消失的盒子</div>
<script>
//点span显示盒子
$("span").click(
  function(){
  event.stopPropagation()//阻止事件冒泡
  $(".box").show()
  }
)
//点文档隐藏盒子
$(document).click(
  function(){
  $(".box").hide()
  }
)
</script>
</body>
</html>
时间: 2024-10-25 12:53:00

阻止冒泡事件demo的相关文章

点击tr实现选择checkbox功能,点击checkobx的时候阻止冒泡事件, jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态

给tr添加点击事件,使用find方法查找tr下的所有层级的元素,children只查找下一层级的元素,所以使用find.find的返回值为jquery对象,在这个项目中不知道为什么使用jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态,所以我就把jquery对象转换为DOM对象,怎么转呢?jquery对象[0]或者get(0)就转换成DOM对象,然后直接.checked返回true或false就可以判断checkbox是否选中了.然后判断状

DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理

事件对象——兼容处理 1 /* 2 * 功能: 事件对象兼容 3 * 参数: 表示常规浏览器的事件对象e 4 */ 5 function getEvent(e) { 6 7 // 如果存在e存在,直接返回,否则返回window.event 8 return e || window.event; 9 } 获取事件所对应的目标——兼容处理 1 /* 2 3 * 功能: 获取事件所对应的目标 4 5 * 参数: 表示常规浏览器的事件对象e 6 7 */ 8 9 function getTargetBy

jquery阻止冒泡事件:$(&#39;span&#39;).bind(&quot;click&quot;,function(event){event.stopPropagation();})(有用源)

冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. <body> <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"></div> </body> <script type="text/javascript"> $(funct

JQuery阻止冒泡事件on绑定中异常情况分析

科普下事件冒泡以及默认行为,以下面例子举列子: 事件冒泡:当点击内部button元素时,会触发自身及外层 a的点击事件,这就是事件冒泡引起的.事件会随着 DOM 的层次结构依次向上传播. 事件冒泡可能会引起意料之外的效果,有时候需要阻止事件的冒泡行为. 默认行为:例子中a的href跳转链接就是所谓的默认行为,或者是表单form的提交. JQuery中阻止冒泡常用到的有以下3个方法: 1:event.stopPropagation();  只阻止了冒泡事件, 默认行为没有阻止 2:event.pr

IE与火狐下兼容(阻止冒泡事件)

function stopEvent(){ //阻止冒泡事件 //取消事件冒泡 var e=arguments.callee.caller.arguments[0]||event; //若省略此句,下面的e改为event,IE运行可以,但是其他浏览器就不兼容 if (e && e.stopPropagation) { // this code is for Mozilla and Opera e.stopPropagation(); } else if (window.event) { /

div嵌套点击事件问题解决方法-阻止冒泡事件

<html> <body> <li onclick="javascript:alert(1);">11111 <li onclick="javascript:alert(2);">  22222 <li id="li3" onclick="javascript:alert(3);">    33333 </li> </li> </li&g

冒泡事件 阻止冒泡事件

什么是冒泡事件? 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层. 举个栗子: 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>阻止冒泡</title> 4 <script src="script/jquery-1

js 阻止冒泡事件和默认事件

阻止事件冒泡 window.enent ? window.enent.cancelBubble = true : e.stopPropagation() function stopBubble(event){ if(window.event){//兼容IE window.event.cancelBubble=true; }else{ event.stopPropagation(); } 阻止默认事件 window.event? window.event.returnValue=false : e

页面内部DIV让点击外部DIV 事件不发生(阻止冒泡事件)

如标题的情况,经常发生,尤其是在一些弹出框上面之类的. <script> function zuzhimaopao(){ e.stopPropagation(); } </script> 一般的google浏览器添加上面此项就可以,但是发现在FF下并不工作,于是有了如下: function getEvent(){ if(window.event) {return window.event;} func=getEvent.caller; while(func!=null){ var