默认行为及阻止 浏览器以及HTML元素提供了一些默认行为，也可以称作默认事件。...默认行为 a标签点击跳转 标签在href存在的情况下会点击自动跳转链接或者定位锚点，通过对的监听事件阻止默认行为后，点击链接不会跳转。...，阻止默认行为后，点击将不会改变目前状态。...W3C推荐的阻止默认行为的方式是event.preventDefault()，此方法只会阻止默认行为而不会阻止事件的传播。...IE8及之前的浏览器阻止默认行为需要使用window.event.returnValue = false。 直接在事件处理函数中return false也能阻止默认行为，只在DOM0级模型中有效。
在前端开发工作中，由于浏览器兼容性等问题，我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。...IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则，我们需要使用...IE的方式来取消事件冒泡 window.event.cancelBubble = true; return false; 阻止浏览器的默认行为 JavaScript代码 //编辑文章时阻止...IE浏览器 if ( e && e.preventDefault ) { //阻止默认浏览器动作...e.preventDefault(); }else{ //IE中阻止函数器默认动作的方式
在前端开发工作中，由于浏览器兼容性等问题，我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。...( e && e.stopPropagation ) 3 //因此它支持W3C的stopPropagation()方法 4 e.stopPropagation(); 5 else 6 //否则，我们需要使用...IE的方式来取消事件冒泡 7 window.event.cancelBubble = true; 8 return false; 2.阻止浏览器的默认行为 JavaScript代码 1 element.onclick...2、使用原生javaScript，在事件处理程序中返回false只会阻止浏览器默认行为，而事件冒泡依然存在。 3、浏览器默认行为和事件冒泡是相互独立的。阻止事件冒泡不会影响默认行为，反之亦然。...注意： 有一些浏览器行为是在事件处理程序执行前发生的，也就是说这些默认行为是无法取消的，如：在大部分浏览器上鼠标移到一个超链接上超链接的样式会发生改变，这个动作是发生在focus事件之前的，是focus
，但是会不阻止默认行为。...既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。 什么元素有默认行为呢？如链接，提交按钮等。...，而是用jQuery的话则既阻止默认行为又防止对象冒泡。...下面这个使用原生js，只会阻止默认行为，不会停止冒泡 <li id...IE的方式来取消事件冒泡 window.event.cancelBubble = true; } 当需要阻止默认行为时，可以使用 //阻止浏览器的默认行为 function stopDefault
摘要 很多同学对阻止事件冒泡和阻止事件默认行为容易混淆，项目中因为一些原因也需要阻止浏览器的一些默认行为，这里就简单总结一下。...可以尝试使用return false 阻止浏览器默认行为 在开始之前，首先需要了解什么是浏览器的默认行为，我这里简单举几个例子： 点击a标签，如果设置了href会执行跳转 点击输入框，输入框会获取焦点...点击右键，会弹出浏览器右键菜单 点击submit，会提交其所在表单 点击checkbox 会选中或者反选 还有其他的很多，这里就不一一列举了 同样的对于阻止浏览器默认行为的实现也分为W3C标准实现和IE...default was prevented */ } 当然不是所有的事件都可以被cancel，浏览器也提供了cancelable属性来判断事件是否可以被取消，如果cancelable为false，那么便无法阻止浏览器的默认行为...; console.dir(event); } } document.addEventListener('wheel', preventCancelableEvents); # 总结 阻止默认冒泡和阻止浏览器默认行为需要关注的是兼容性问题
——陀思妥耶夫斯基《罪与罚》 今天遇到一个问题，我想阻止浏览器默认的滚动事件，却阻止不了还一直报错 <!
window.event.cancelBubble = true : e.stopPropagation(); } js阻止默认行为 function myfn(e){ window.event? ...e.stopPropagation()，IE则是使用e.cancelBubble = true stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为...既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接，提交按钮等。...，而是用jQuery的话则既阻止默认行为又防止对象冒泡 下面这个使用原生js，只会阻止默认行为，不会停止冒泡 <ul onclick...IE的方式来取消事件冒泡 window.event.cancelBubble = true; } 当需要阻止默认行为时，可以使用 //阻止浏览器的默认行为 function stopDefault
.81: Use =delete when you want to disable default behavior (without wanting an alternative) C.81:如果不需要默认...（同时不需要其他选项）行为，使用=delete禁止它们 Reason（原因） In a few cases, a default operation is not desirable....某些情况下·，也有可能·不希望存在默认行为。...消除默认操作（应该）应该基于类的期待语义。怀疑这些类，但同时维护类的“正面清单”，其内容是由人断定是正确的东西。
jsx 的原理 自定义的 React 组件为何必须大写 setState 什么时候是同步,什么时候是异步? React 如何实现自己的事件机制？...在 React 中, React 会先将代码转换成一个 JS 对象, 然后再将这个 JS 对象转换成真正的 DOM. 这个 JS 对象就是所谓的虚拟 DOM....它可以让我们无须关注 DOM 操作, 只需要开心地编写数据,状态即可. 三. react diff 原理, 如何从 O(n^3) 变成 O(n) 为什么是 O(n^3) ?...自己动手玩一下转换, 加深印象吧~ babel 转换[3] 五. setState 什么时候是同步,什么时候是异步? 这里的“异步”不是说异步代码实现....不能通过 return false 来阻止默认行为, 必须明确调用 preventDefault 去阻止浏览器的默认响应. 推荐阅读(动画浅析 React 事件系统和源码)[4] 七.
"non-fast" 滚动区域 由于 js 代码可以绑定事件监听，而且事件监听中存在一种 preventDefault() 的 API 可以阻止事件的原生效果比如滚动，所以在一个页面中，浏览器会对所有创建了此监听的区块标记为...注意，只要创建了 onwheel 事件监听就会标记，而不是说调用了 preventDefault() 才会标记，因为浏览器不可能知道业务什么时候调用，所以只能一刀切。...因为在这个区域触发事件时，合成器必须与渲染进程通信，让渲染进程执行 js 事件监听代码并获得用户指令，比如是否调用了 preventDefault() 来阻止滚动？...毕竟作为一个不了解浏览器实现的开发者，自然会认为 preventDefault() 绑定在滚动事件时，一定可以阻止默认滚动行为呀，但为什么因为： 浏览器分为合成层和渲染进程，通信成本较高导致滚动事件监听会引发滚动卡顿...总之就是 React 与浏览器实现背后的纠纷，导致滚动行为阻止失效，而这个结果链条传导到了开发者身上，而且有明显感知。
事件修饰符： .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身（比如不是子元素...）触发时触发回调 .once 事件只触发一次 事件修饰符的串联使用，例如：@click.prevent.once，只会执行一次阻止默认行为，第二次则不会阻止。...示例：.prevent 阻止默认事件 编写一个a标签，绑定一个click事件，阻止a标签默认的href跳转页面的行为。 示例如下： <!...但是很多时候，其实是不需要a标签的默认行为的，这时候就需要阻止默认行为了，如下： ? ? 此时点击a标签则阻止了默认行为，只执行监听事件。...示例：事件修饰符的串联使用，例如：@click.prevent.once，只会执行一次阻止默认行为，第二次则不会阻止。另外，两个事件修饰符的先后效果一致。 ?
前言 上一章节，讲解了v-on监听事件的基本用法，那么本章节来介绍一下事件修饰符，主要用来解决「阻止冒泡」、「阻止默认事件」等等情况。...）触发时触发回调 .once 事件只触发一次 事件修饰符的串联使用，例如：@click.prevent.once，只会执行一次阻止默认行为，第二次则不会阻止。...示例：.prevent 阻止默认事件 编写一个a标签，绑定一个click事件，阻止a标签默认的href跳转页面的行为。 示例如下： <!...a标签的默认行为的，这时候就需要阻止默认行为了，如下： 此时点击a标签则阻止了默认行为，只执行监听事件。...点击div，查看触发事件，如下： 示例：.once 事件只触发一次 多次点击btn按钮，查看触发事件，如下： 示例：事件修饰符的串联使用，例如：@click.prevent.once，只会执行一次阻止默认行为
成都办公室的陈致豪花了时间，把事件处理模型整理清楚，做了一次《浏览器默认行为执行与阻止分析》，帮我们更好地理解发生的一切。...浏览器默认行为执行与阻止分析 首先简单回顾下DOM的事件处理过程: DOM0级: ? 在图(1)所示的capture phase中, 事件向下冒泡抵达目标的父元素。...好了,回到本文主题,关于阻止浏览器默认行为。...第二个a元素可以完成浏览器的默认行为,进行页面跳转。 这里有一个很容易被大家忽视的问题:子节点的浏览器默认行为,被父节点的event.preventDefault() 阻止了。...通过对子节点的stopPropagation才可以防止父节点阻止子节点的浏览器默认行为。 But Why?
插值语法 功能: 用于解析标签体内容 写法: 中要写js表达式 且xxx可自动读取data中所有属性 多级对象这样写: 2....{ name: '小城故事' } }) console.log(vm) 9. vue的事件绑定 使用v-on:xxx 或 @xxx 绑定事件, 其中xxx是事件名 事件的回调需要配置在...阻止事件默认行为(常用) --> 点我提示信息 修饰符可以连续写入...事件的默认行为立即执行, 无需等待事件回调完成 --> 1 2
</script...on" + type, function(event) { return handler.call(target, event); }, true); } }; 阻止默认行为...W3C推荐的阻止默认行为的方式是event.preventDefault()，此方法只会阻止默认行为而不会阻止事件的传播。...IE9之前的浏览器阻止默认行为需要使用window.event.returnValue = false。直接在事件处理函数中return false也能阻止默认行为，只在DOM0级模型中有效。...此外，在jQuery中使用return false会同时阻止默认行为与事件传播，通常也会封装一个方法来实现默认行为的阻止。
然后学了js以为自己已经是前端了 到处投简历 说自己精通原生js 不会任何框架 现在想来 还是太年轻 学了node+mongodb+pug+layui 学了vue 却发现要成为一个真正的前端工程师，这些远远不够...-- 网页主干：可视化区域 --> /* 默认行为： 浏览器自带的默认事件 当需要自定义这些行为的时候，就需要干掉默认行为 */ // 阻止默认行为 event.preventDefault...if (e.wheelDetail > 0){ console.log("向前滚动"); } else { console.log("向后滚动"); } }, true); // 第三个参数，true（阻止默认行为...），默认为false（不阻止默认行为） function mousewheel(dom, cb, bool){ /* 滚轮方向： e.wheelDetail 正值向前 负值向后 */ var type...bool){ // 阻止默认行为 if (e.preventDefault){ e.preventDefault(); } else { event.returnValue = false; } }
阻止body的默认滚动？...假如我们的浮层上真的需要滚动事件，就不能阻止这些元素的默认行为。 浮层上面的滚动元素？...既然浮层上面有需要滚动的元素，最简单的方案就是有选择性地阻止默认事件： document.addEventListener( 'touchmove', e => { const excludeEl...} e.preventDefault(); }, { passive: false },); 我们简单地规定带有 can-scroll类名的元素是可滚动的，这些元素以及他们的子元素全部采用不阻止默认事件策略...可是从使用性质来考虑，还不是很便捷，尤其是现在如 React， Vue这类框架中，还需要考虑浮层什么时候实例化，什么时候应当调用 lock和 unlock显得有些麻烦，因此编写了一个React版本的组件
，当你网页上滚动鼠标滚轮的时候，页面的滚动条会滚动等等；这些都叫事件的默认行为，如果想把这些默认行为取消了，相应的js代码如下： a.onclick = function(){return false}...',function(e){e.preventDefault = true;}); 火狐的取消滚轮的默认行为；火狐只能用Dom的二级事件绑定方式，并且用e.preventDefault = true;来取消浏览器滚轮的默认行为...； 我们要知道常见的事件默认行为有哪些，并且要知道阻止默认行为，只要绑定到这个行为事件的方法最后加一句：return false；就可以了； 但是要强调的是：如果你的事件绑定是用addEventListener...来实现的，那阻止默认行为必须用e.preventDefault = true; 事件传播和阻止事件传播： 当事件发生在子元素中的时候，往往会引起连锁反应，就是在它的祖先元素上也会发生这个事件...，但是性能不是最优的； return false;//阻止超链接的默认行为； } } 以下用事件委托实现 事件委托：事件委托就是利用事件传播的机制，无论哪一个页面元素，他的click事件都会最终传播到document
：这个地方是无法用return false代替的 //return false只能取消元素 } } 2、return false javascript的return false只会阻止默认行为...，而是用jQuery的话则既阻止默认行为又防止对象冒泡。...//原生js，只会阻止默认行为，不会停止冒泡 var a = document.getElementById("testA"); a.onclick = function(){ return false...1 //jQuery，既阻止默认行为又停止冒泡 2 $("#testA").on('click',function(){ 3 return false;//当然 也阻止了事件本身 4 }); 总结使用方法...IE的方式来取消事件冒泡 } } 当需要阻止默认事件时 function stopDefault( e ) { if ( e && e.preventDefault ){
>阻止事件的默认行为 使用prevent是阻止事件的默认行为，使用prevent相当于调用event.preventDefault()。...3，只阻止默认行为 只使用修饰符，不监听事件，例如： <!...以js方式实现同样的效果，需要启用捕捉阶段的监听，并判断当前的事件对象是不是这个div，远不如加一个self修饰符简单。 6，once 只监听一次，例如： <!...passive要求使用组件的默认滚动行为，所以与阻止默认行为的prevent修饰符就不能同时使用。prevent 是拦截默认事件，passive是不拦截默认事件。...浏览器只有等内核线程执行到事件函数的代码时，才能知道函数内部是否会调用了preventDefault函数来阻止事件的默认行为，所以浏览器本身是没有办法对这种场景进行优化的。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
