jq-demo-阻止冒泡，阻止默认行为

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div id = "box" style = "width: 200px; height: 200px; background:green;">
 9             <input type="button" value = "按钮" />
10         </div>
11
12         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
13         <script>
14             $(function () {
15                 $("body").click(function () {
16                     console.log("body");
17                 });
18                 $("#box").click(function () {
19                     console.log("div");
20                 });
21                 $("input").click(function (e) {
22                     console.log("input");
23
24                     e.stopPropagation();//阻止冒泡
25                     console.log(e.isPropagationStopped);//true
26
27                     e.preventDefault()//阻止浏览器默认行为
28                 })
29             })
30         </script>
31     </body>
32 </html>

e.stopPropagation();//阻止冒泡
console.log(e.isPropagationStopped);//true
e.preventDefault()//阻止浏览器默认行为

时间： 2024-10-15 12:23:41

jq-demo-阻止冒泡，阻止默认行为的相关文章

js中阻止冒泡与默认事件

在一些情况下,我们必须阻止冒泡,或者是要阻止浏览器的默认事件,方便操作,简单代码如下: 阻止冒泡: function stopBubble(ev) { if(ev&&ev.stopPropagation);//非IE下,DOM2 { e.stopPropagation(); } else { window.event.cancelBubble=true;//IE下 } } 阻止默认事件: function stopDefault(ev) { if(ev&&ev.preven

<jQuery> <方法> 十八. 移除事件, 触发事件, 事件对象(阻止冒泡, 阻止跳转)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>RayLee</p> <p>RayLee</p> <p>RayLee</p> <input

基本event封装：阻止冒泡、默认事件等

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <div id="box"> <input type="button" value="按钮3" id="btn3"> <a href="http://www.so

jQuery阻止冒泡和HTML默认操作

jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡可以这样理解: 条件:外层有一个DIV元素,在内层有一个P元素,他两存在这样的关系:DIV是P元素的父元素,而P是外层DIV的子元素,他们之间存在包含和被包

弹出菜单阻止冒泡

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>弹出菜单,阻止冒泡</title> <style> </style> <script src="jquery-1.9.1.js"></script> <script> $(fu

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

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

js 停止事件冒泡阻止浏览器的默认行为（阻止超连接 # ）

在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( e && e.stopPropagation )//因此它支持W3C的stopPropagation()方法e.stopPropagation(); else//否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true;return fal

javascript如何阻止事件冒泡和默认行为

阻止冒泡: 冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而以引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷.下面的demo 就是很好的例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css&quo

阻止默认行为阻止冒泡

什么是默认行为? var a = document.getElementById('a'); a.addEventListener('click',function(e){ e.preventDefault(); },false); 兼容性问题: function preventDefault(event){ var event = $$.getEvent(event); if(event.preventDefault){ event.preventDefault(); }else{ event

js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了.什么元素有默认行为呢?如链接<a>,提交按钮<input type=”submit”>等.当Event对象的cancelable为false时,表示没有默认行为,这时即使有默认行为,调用 preventDefault也是不会起作用的. 我们都知道,链接&