jQuery 阻止冒泡和默认事件】的更多相关文章

jQuery event.preventDefault() 方法 event.preventDefault() 方法阻止元素发生默认的行为. 例如: 当点击提交按钮时阻止对表单的提交 阻止以下 URL 的链接 语法:event.preventDefault()//event 必需.event 参数来自事件绑定函数.   jQuery event.stopPropagation() 方法 event.stopPropagation() 方法阻止事件冒泡到父元素,阻止任何父事件处理程序被执行. ev…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止冒泡和默认事件</title> </head> <body> <button>阻止冒泡和默认事件</button> <script> function stopPropagation(e) {…
<!DOCTYPE html> <html>     <head>     <meta charset="UTF-8">     <title></title>     <style type="text/css">       #box {         width: 300px;         height: 300px;         background: red;  …
<!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 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.js"></script>…
科普下事件冒泡以及默认行为,以下面例子举列子:     事件冒泡:当点击内部button元素时,会触发自身及外层 a的点击事件,这就是事件冒泡引起的.事件会随着 DOM 的层次结构依次向上传播. 事件冒泡可能会引起意料之外的效果,有时候需要阻止事件的冒泡行为.     默认行为:例子中a的href跳转链接就是所谓的默认行为,或者是表单form的提交. JQuery中阻止冒泡常用到的有以下3个方法: 1:event.stopPropagation();  只阻止了冒泡事件, 默认行为没有阻止 2:…
1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡可以这样理解:        条件:外层有一个DIV元素,在内层有一个P元素,他两存在这样的关系:DIV是P元素的父元素,而P是外层DIV的子元素,他们之间存在包含和被包含的关系.       事件:现在我们都在这两个元素上绑定相同的事件,比如click事件.       结果:这时,当我们点击内层…
<div onclick="a()"> <p onclick="b()"></p> </div> div和p元素都绑定onclick事件,当点击p元素的事件,及父级的onclik可能也会同时出发,当不希望冒泡或默认事件发生时,可以使用3种方法来执行组织事件发生: 1:return false  可以阻止冒泡事件和默认事件的发生: 2:event.preventDefault()   可以阻止默认事件,允许冒泡事件的发生…
嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,从而带来一定的影响. 1. event.preventDefault();  -- 阻止元素的默认事件.注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件 例:<a href="http://www.baidu.com" target="_black">百度</a> var samp…
楔子 是不是在火狐用stopPropagation不太满意 很久没有笑过又不知为何 既然不快乐又不喜欢这里 不如一路向西用stopImmediatePropagation(其实我对浏览器的兼容性看不顺眼已经很久了,殊不知浏览器对我的想法更不顺眼,甚至嗤之以鼻) 注释 言归正传,让我解释一下stopImmediatePropagation的用法:如果多个监听器连接到同一事件类型的同一元素,则按添加监听器的顺序调用它们.如果在一个这样的调用中调用了event. stopimmediatePropag…
JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = function() { console.log("文档点击"); } // on事件只能绑定一个方法,重复绑定保留最后一次绑定的方法 // .onclick = function (){} document.onclick = function() { console.log("文档点…
h5 移动端在阻止touchstart的默认事件时报错 解决办法, 可以添加 *{ touch-action: none;}即可消除错误…
时间触发时会执行两个步骤:1.捕获 2.冒泡,而很多浏览器包括jquery都不支持捕获动作所以只能执行冒泡动作. 所谓冒泡就是当点击就是事件的执行顺序,本人的理解为:但某一元素触发时间时它的祖先元素(包括父元素)都会执行此事件一次,这增加了浏览器的负担. 因此我们可以在事件函数补上这一语句 event.stopPropagation();或者 return false 阻止冒泡过程…
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. <body> <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"></div> </body> <script type="text/javascript"> $(funct…
首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事件方法: e.preventDefault(); //非IE浏览器window.event.returnValue = false; //IE浏览器 而vue.js给我们提供了更简便的方法,我们可以通过function($event)来获取事件对象,$event.target则是选择发生事件的目标元…
一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true:  FF下:event.stopPropagation(); //阻止事件冒泡函数 function stopBubble(evt) { var e = evt || window.event; if (e && e.stopPropagation) e.stopPropagation() else window.…
本文地址:https://www.cnblogs.com/guomin/p/9273862.html 原生js取消事件冒泡 try{ e.stopPropagation();//非IE浏览器 } catch(e){ window.event.cancelBubble = true;//IE浏览器 } 原生js阻止默认事件 if ( e && e.preventDefault ) { e.preventDefault()//非IE浏览器 } else { window.event.retur…
经常遇到场景:多层级元素绑定ng-click 事件,则底层元素的点击事件存在冒泡现象,怎么解决? 类似原生JS ,只是语法稍有不同,如下: 阻止冒泡 $event.stopPropagation() 阻止默认行为 $event.preventDefault() 代码实例--tab切换 // html 行内阻止 <div ng-click="parentTab(1,$event)">父盒子点击 <div class="sw_active" ng-cl…
摘要 很多同学对阻止事件冒泡和阻止事件默认行为容易混淆,项目中因为一些原因也需要阻止浏览器的一些默认行为,这里就简单总结一下. 阻止事件冒泡 什么是事件冒泡这里就不再赘述了,网上的文章一大把,这里就简述一下如何阻止事件冒泡,阻止事件冒泡在使用浏览器原生API的情况下,是需要分情况考虑的,毕竟有个个性的浏览器IE,这里分为IE实现和W3C标准实现. 在W3C标准实现中,我们阻止事件冒泡可以很容易使用标准API 基本语法: event.stopPropagation(); IE实现下(这里主要指IE…
如题,话不多话,我们先看怎么解决 根据不同的绑定事件的方法,我们有不同的阻止默认事件的方法 如果你不知到如何绑定事件,请查看我的上一篇文章 关于浏览器滚动的兼容性问题以及事件绑定 1.句柄绑定 只需要在代码块的最后一行添加一行 return false; 2."addEventListener"绑定 即: DOM.addEventListener("click", function (e) { var event = e || window.event; }, fa…
event.stopPropagation(); event.preventDefault(); http://www.cnblogs.com/qixuejia/archive/2013/10/10/3362318.html…
//功能:停止事件冒泡 function stopBubble(e) { if ( e && e.stopPropagation ) { e.stopPropagation(); } else { // ie old window.event.cancelBubble = true; } } //功能:阻止事件默认行为 function stopDefault( e ) { if ( e && e.preventDefault ) { e.preventDefault();…
如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出现冒泡问题.//HTML 页面<div style="width:200px;height:200px;background:red;"><input type="button" value="按钮" /></div>//三个不同元素触发事件$('input').click(function () {alert('按钮被触发了!');}…
这其实是一个很简单的问题,如果你认真查看过Angular官方的API文档,本来不想记录的.但是这个问题不止一次的被人问起,所以今天在记录在这里. 在Angular中已经对一些ng事件如ngClick,ngBlur,ngCopy,ngCut,ngDblclick…中加入了一个变量叫做$event. 如ngClick在官方文档是这么描述的: Expression to evaluate upon click. (Event object is available as $event) 在查看Angu…
如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出现冒泡问题. //HTML 页面 <div style="width:200px;height:200px;background:red;"> <input type="button" value="按钮" /> </div> //三个不同元素触发事件 $('input').click(function () { alert('按钮被触…
方法/步骤    疑问 打开编辑器,新建html并加入a标签,如图所示,小编想点击a标签时执行pop函数同时禁止a标签的默认的href跳转,该如何阻止呢?  方法一 要阻止a标签跳转,可以改变href的值,直接写成“JavaScript:void(0)”即可阻止跳转:   或者将a标签href值写成“JavaScript::”也可以阻止跳转:如图所示  方法二 可以直接将onclick事件改成return pop():如图,亦可阻止a标签默认浏览器行为:   或者在onclick事件内再加上re…
方式一: <form autocomplete="off" @submit.prevent="onSubmit"> <input type="text" /> </form> methods: { onSubmit(){return false;} } 方式二(当使用UI框架时): <Form autocomplete="off" v-on:submit.native="on…
在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级   渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果.交互等改进和追加功能达到更好的用户体验   优雅降级(graceful degradation): 一开始就构建完整的功能,然后再针对低版本浏览器进行兼容.     1.获取非行内样式:         函数getStyle(e,attr)…
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, 2.event.preventDefault()方法 这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素: 3.return false  : 这个方法比较暴力,他会同事阻止事件冒泡也会阻止默认事件:写上此代…
原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下JavaScript阻止默认事件与JavaScript阻止事件冒泡示例. (1)阻止冒泡事件 注:嵌套元素一般都存在冒泡事件,会带来某些影响 最外层标签:outer,中间层标签:center,最内层标签:inner,并且在outer.center.inner都添加了alert弹框事件,在正常思维情况下…