首页 > js中的preventDefault与stopPropagation详解

js中的preventDefault与stopPropagation详解

1. preventDefault: 

  比如百度,这是html中最基础的东西,起的作用就是点击百度链接到http://www.baidu.com,这是属于标签的默认行为;preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情;

 1 DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>JS阻止链接跳转title>
 6 <script type="text/javascript"> 
 7 function stopDefault( e ) { 
 8 if ( e && e.preventDefault ) 
 9    e.preventDefault(); 
10     else 
11    window.event.returnValue = false; 
12 
13     return false; 
14 } 
15 script> 
16 head>
17 <body>
18 <a href="http://www.baidu.com" id="testLink">百度a> 
19 <script type="text/javascript"> 
20 var test = document.getElementById('testLink'); 
21 test.onclick = function(e) { 
22    alert('我的链接地址是:' + this.href + ', 但是我不会跳转。'); 
23    stopDefault(e); 
24 } 
25 script>
26 body>
27 html>

此时点击百度链接,不会打开http://www.baidu.com,而只是弹出一个alert对话框

2. stopPropagation :

  起到阻止js事件冒泡的作用;

  2.1 讲stopPropagation方法之前必需先给大家讲解一下js的事件代理: 

  (1) 事件代理用到了两个在JavaSciprt事件中常被忽略的特性:事件冒泡以及目标元素

  事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层.

  目标元素: 对任何一个事件来说,其目标元素都是原始元素,在我们的这个例子中也就是按钮。目标元素它在我们的事件对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上,等待事件从它的子级元素里冒泡上来,并且可以很方便地判断出这个事件是从哪个元素开始的。

  下面看一段代码:

DOCTYPE html>
<HTML XMLns="http://www.w3.org/1999/xHTML" lang="gb2312">
<head><title> 阻止JS事件冒泡传递(cancelBubble 、stopPropagation)title><meta name="keywords" content="JS,事件冒泡,cancelBubble,stopPropagation" /><script>function doSomething (obj,evt) {alert(obj.id);var e=(evt)?evt:window.event;if (window.event) {e.cancelBubble=true;// ie下阻止冒泡
            } 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. Will bubble.p>div><p>This is parent2 div.p>div>
body>
HTML> 

 

参考:http://www.jb51.net/article/46379.htm

  

 

转载于:https://www.cnblogs.com/max-tlp/p/8257688.html

更多相关:

  • addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理...

  • 有时候当我们单纯的看 Laravel 手册的时候会有一些疑惑,比如说系统服务下的授权和事件,这些功能服务的应用场景是什么,其实如果没有经历过一定的开发经验有这些疑惑是很正常的事情,但是当我们在工作中多加思考会发现有时候这些服务其实我们一直都见过。下面就事件、事件监听举一个很简单的例子你就会发现。 ​ 这个例子是关于文章的浏览数的实现,...

  • 1、点击元素,获取绑定该事件的父级元素,使用 e.currentTarget。e.target 获取的是,出发该事件的元素,该元素有可能是所绑定事件的元素的子元素。    2、使用 react router4   history 只能传递给儿子组件,不能传递给孙子组件   如果孙子组件需要,可以通过 props 传递过去    3、关...

  • Vue组件使用v-on绑定自定义事件:   可以分为3步理解:     1.在组件模板中按照正常事件机制绑定事件:       template: '',       如上,v-on:click就是用来给子组件绑定点击事件的,这就...

  • 栈stack:stack 后入先出(LIFO) q.top()获取栈顶元素(并不删除)q.pop()删除栈顶元素q.push(x)向栈中加入元素q.empty()判断栈是否为空 队列queue:先入先出(FIFO)   q.front()获取队首元素(并不删除)q.pop()删除队首元素q.push(x)向队列中加入元素q....

  • resize(),设置大小(size); reserve(),设置容量(capacity); size()是分配容器的内存大小,而capacity()只是设置容器容量大小,但并没有真正分配内存。 打个比方:正在建造的一辆公交车,车里面可以设置40个座椅(reserve(40);),这是它的容量,但并不是说它里面就有了40个座椅,只能说...

  • v-for="(index,$i) in total" :key="$i":style="{left:`${itemWidth*((index-1)%rowItemCount)}px`,top:`${itemHeight*(Math.ceil(index/rowItemCount)-1)}px`}" //total是显示总数量 //l...

  •   技巧一(推荐指数★★★★★) 采用top、right、bottom、left,可以不在乎父元素的宽度和高度,对GPU损耗低于技巧三,但是对浏览器内存的消耗高于技巧三 .子元素 {/*父元素需要position: relative|absolute;*/position: absolute;margin: auto;to...

  • 设计一个支持 push,pop,top 操作,并能在常数时间内检索到最小元素的栈。 push(x) – 将元素 x 推入栈中。pop() – 删除栈顶的元素。top() – 获取栈顶元素。getMin() – 检索栈中的最小元素。 示例: MinStack minStack = new MinStack(); minStack...