场景1:阻止默认事件
   比如这样的一个需求 点击取消a标签按钮的时候会触发一些js动作,但是不能让这个a标签产生跳转行为,

所以需要在点击取消的时候 阻止冒泡,防止其跳转。

<a id='cancelBtn' href="https://www.baidu.com">取消按钮</a>
<script>
document.getElementById("cancelBtn").addEventListener("click",function(e){
    e.preventDefault();
    alert("点击了");
});
</script>

场景2:阻止冒泡
   比如最简单的弹出层:当点击提交按钮的时候提交信息,当点击弹出层周边的空白区域的时候取消遮罩。但

是因为存在事件冒泡机制,点击提交按钮时,点击事件会冒泡到div弹出层,以致遮罩层自动取消,这时我们就

应当阻止事件冒泡了。

<div id="dialog">
<span id="submit">确定</span>
</div>
<script>
$("#submit").on("click",function(e){
e.stopPropagation(); //阻止冒泡,防止冒泡到document层
...
});
$(document).on("click",function(e){
if($(e.target).closest("#dialog").length == 0){
$("#dialog").hide();
}
})
</script>

小结:
  1.阻止事件冒泡,但不阻止默认行为。如 stopPropagation 或 cancelBubble等。
  2.阻止默认行为,但不阻止事件冒泡。如 preventDefault 方法。
  3.同时阻止事件冒泡和默认行为。直接 return false 即可。

转载请注明文章出处:http://www.cnblogs.com/jacksplwxy/p/6651964.html

(O)阻止默认事件和阻止冒泡的应用场景的更多相关文章

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

    事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window. ...

  2. javascript的阻止默认事件和阻止冒泡事件

    这两个方面的知识,在妙味课堂中有听过,再次复习一下: 原文来自:[http://www.cnblogs.com/Essence/p/4266618.html] 事件冒泡与默认行为   在说事件冒泡之前 ...

  3. s事件之event.preventDefault()与event.stopPropagation()的阻止默认事件和阻止事件冒泡的用法

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

  4. 在javascript中的浏览器兼容问题以及兼容浏览器汇总(默认事件,阻止冒泡,事件监听。。。)以及解决方式详解

    在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级   渐进增强(progressive enhancement): 针对低版本浏览器进 ...

  5. JavaScript事件:事件处理模型(冒泡、捕获)、取消冒泡、阻止默认事件

    (一)事件处理模型---事件冒泡.捕获 (1)事件冒泡 24 <body> 25 <div class="warpper"> 26 <div clas ...

  6. 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

  7. js之阻止事件冒泡(待修改)和阻止默认事件

    阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  8. javascript 阻止事件冒泡和阻止默认事件对比

    公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...

  9. JS 之 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

    在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...

随机推荐

  1. 梯度迭代树(GBDT)算法原理及Spark MLlib调用实例(Scala/Java/python)

    梯度迭代树(GBDT)算法原理及Spark MLlib调用实例(Scala/Java/python) http://blog.csdn.net/liulingyuan6/article/details ...

  2. mysql5.7.10开启慢查询

    MySql提供慢SQL日志的功能,能够记录下响应时间超过一定阈值的SQL查询,以便于我们定位糟糕的查询语句. 首先,查询当前mysql数据库是否开启了慢查询日志功能: show VARIABLES l ...

  3. Python之 ---成员修饰符

    一:成员修饰符:分为共有成员和私有成员: 私有成员:__通过两个下滑线:无法直接访问,要访问只能间接访问: 如下我们定义了一个对象,里面有两个共有的成员变量,成员变量是共有的时候我们可以外部访问,如果 ...

  4. 我的一次rsync+inotify本地数据同步示例

    环境: web工作目录:/var/www/mydafuhao git仓库目录: /var/www/mydafuhao.git/mydafuhao 需求:inotify监控git仓库目录,发现有版本更新 ...

  5. 【OpenGL】第一个窗口

    包含头文件: #include <GL/glew.h> // GLFW #include <GLFW/glfw3.h> 初始化与配置GLFW: glfwInit(); //初始 ...

  6. vmware 完全关闭时间同步

    参考 http://blog.51cto.com/hezhang/1535577 修改.vmx文件 tools.syncTime = "FALSE" time.synchroniz ...

  7. 贪吃蛇Global Java实现(二)

    package cn.tcc.snake.util; public class Global {public static final int CELL_SIZE=20;public static f ...

  8. php cli命令 自定义参数传递

    所有的PHP发行版,不论是编译自源代码的版本还是预创建的版本,都在默认情况下带有一个PHP可执行文件.这个可执行文件可以被用来运行命令行的PHP程序.要在你的系统上找到这个可执行文件,就要遵照下面的步 ...

  9. vue 点击图片显示大图

    使用指南:https://www.npmjs.com/package/vue-directive-image-previewer 简单使用: 1.安装vue-directive-image-previ ...

  10. POJ 2396 Budget(有源汇上下界网络流)

    Description We are supposed to make a budget proposal for this multi-site competition. The budget pr ...