preventDefault的作用是什么方法，它？

我们知道，例如，<a href="http://www.baidu.com">百度</a>,这是html最基本的东西，的作用是点击链接百度上http://www.baidu.com,这是属于<a>标签的默认行为。

看一段代码大家就明确了：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>JS阻止链接跳转</title>

        <script type="text/javascript">

            function stopDefault( e ) {

                if ( e && e.preventDefault ) {

                    e.preventDefault();

                } else {

                    window.event.returnValue = false;

                }

                return false;

            }

        </script>

    </head>

    <body>

        <a href="http://www.baidu.com" id="testLink">百度</a>

        <script type="text/javascript">

            var test = document.getElementById( 'testLink' );

            test.onclick = function( e ) {

                alert( '我的链接地址是：' + this.href + ', 可是我不会跳转。' );

                stopDefault( e );

            }

        </script>

    </body>

</html>

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

preventDefault方法解讲到这里，stopPropagation方法呢？

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

事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。当一个元素上的事件被触发的时候，比方说鼠标点击了一个button，相同的事件将会在那个元素的全部祖先元素中被触发。

这一过程被称为事件冒泡。这个事件从原始元素開始一直冒泡到DOM树的最上层。对不论什么一个事件来说。其目标元素都是原始元素。在我们的这个样例中也就是button。目标元素它在我们的事件对象中以属性的形式出现。

使用事件代理的话我们能够把事件处理器加入到一个元素上，等待事件从它的子级元素里冒泡上来，而且能够非常方便地推断出这个事件是从哪个元素開始的。

stopPropagation方法又起什么作用？

stopPropagation是能够阻止它的默认行为的发生而发生其它的事情。起到阻止js事件冒泡的作用。

看一段代码。

<!DOCTYPE html>

<html>

    <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">

            This is parent1 div.

            <div id="child1" onclick="alert( this.id )" style="width:200px;background-color:orange">

                This is child1.

            </div>

            This is parent1 div.

        </div>

        <br />

        <div id="parent2" onclick="alert( this.id )" style="width:250px;background-color:cyan;">

            This is parent2 div.

            <div id="child2" onclick="doSomething( this, event );" style="width:200px;background-color:lightblue;">

                This is child2. Will bubble.

            </div>

            This is parent2 div.

        </div>

    </body>

</html>

我们在上面的代码执行清。

版权声明：本文博客原创文章，博客，未经同意，不得转载。

javascript中间preventDefault与stopPropagation角色介绍的更多相关文章

  1. JavaScript 事件之event.preventDefault()与event.stopPropagation()简单介绍

    event.preventDefault()用法介绍: 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作). 例如,如果 type 属性是 “submit”,在事件传播的任 ...

  2. js中的preventDefault与stopPropagation详解

    本篇文章主要是对js中的preventDefault与stopPropagation进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 首先讲解一下js中preventDefault和stopP ...

  3. preventDefault()、stopPropagation()、return false 之间的区别

    “return false”之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢? 可能在你刚开 ...

  4. js中的preventDefault和stopPropagation

    首先讲解一下js中preventDefault和stopPropagation两个方法的区别:      preventDefault方法的起什么作用呢?我们知道比如<a href=" ...

  5. 深入了解preventDefault与stopPropagation

    event.preventDefault()用法介绍(阻止默认事件) 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "subm ...

  6. Spark角色介绍及spark-shell的基本使用

    Spark角色介绍 1.Driver 它会运行客户端的main方法,构建了SparkContext对象,它是所有spark程序的入口 2.Application 它就是一个应用程序,包括了Driver ...

  7. 【Q】类和对象：游戏角色开发（角色介绍）

    案例情景:某公司要开发新游戏,请用面向对象的思想设计英雄类.怪物类和武器类. 编写测试类,创建英雄对象.怪物对象和武器对象,并输出各自的信息. 其中设定分别如下: 1.英雄类 属性:英雄名字.生命值. ...

  8. JavaScript通过preventDefault()使input[type=text]禁止输入但保留光标

    一.说明 取消事件的默认动作. 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit",在事件传播的任意阶段 ...

  9. preventDefault 和 stopPropagation

    概述 以前开发项目的时候,总是分不清楚 preventDefault 和 stopPropagation,每次都是用 @click.stop试一下,不能就用@click.prevent试一下.今天来好 ...

随机推荐

  1. Qt之QComboBox（基本应用、代理设置）

    QComboBox下来列表比较常用,用户可以通过选择不同的选项来实现不同的操作,如何实现自己的下拉列表呢? 很多人在问QComboBox如何设置选项的高度.代理等一些问题!今天就在此分享一下自己的一些 ...

  2. hdu1506(dp减少重复计算）

    可以算出以第i个值为高度的矩形可以向左延伸left[i],向右延伸right[i]的长度 那么答案便是 (left[i] + right[i] + 1) * a[i] 的最大值 关键left[i] 和 ...

  3. HTTP代理与SPDY协议（转）

    原文出处: fqrouter HTTP代理是最经典最常见的代理协议.其用途非常广泛,普遍见于公司内网环境,一般员工都需要给浏览器配置一个HTTP代理才能访问互联网.起初,HTTP代理也用来翻越“功夫网 ...

  4. Android ImageButton Example 图片按钮

    Android ImageButton Example 图片按钮 使用“android.widget.ImageButton” 展现一个具有背景图片的按钮 本教程将展现一个具有名字为 c.png背景图 ...

  5. linux sort,uniq,cut,wc命令详解 （转）

    sort sort 命令对 File 参数指定的文件中的行排序,并将结果写到标准输出.如果 File 参数指定多个文件,那么 sort 命令将这些文件连接起来,并当作一个文件进行排序. sort语法 ...

  6. Cocos2d-x 脚本语言Lua中的面向对象

    Cocos2d-x 脚本语言Lua中的面向对象 面向对象不是针对某一门语言,而是一种思想.在面向过程的语言也能够使用面向对象的思想来进行编程. 在Lua中,并没有面向对象的概念存在,没有类的定义和子类 ...

  7. Leetcode 3Sum Closet

    二手和3Sum像几乎相同的想法.二进制搜索.关键修剪.但是,在修剪做出很多错误. 然后还有一个更加速了原来的想法O(n^2). #include<iostream> #include &l ...

  8. hadoop 提高hdfs删文件效率----hadoop删除文件流程解析

    前言 这段时间在用hdfs,由于要处理的文件比较多,要及时产出旧文件,但是发现hdfs的blocks数一直在上涨,经分析是hdfs写入的速度较快,而block回收较慢,所以分心了一下hadoop删文件 ...

  9. HDU-3502-Huson&#39;s Adventure Island(BFS+如压力DP)

    Problem Description A few days ago, Tom was tired of all the PC-games, so he went back to some old F ...

  10. 关闭 sqlserver提示信息