首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏johnhuster

    Event preventDefault()与stopPropagation()区别

    阻止它被分派到其他 Document 节点,即到该document节点为止,注意该方法不能改变要在该节点上发生的事情,比如在input元素上执行ctrl+v,默认的行为就是将粘贴板中的数据显示在input元素上; preventDefault ,比如在input元素上按下CTRL+V后,不会讲粘贴板中的数据显示在input上; 有时这两个方法需要同时使用,之所以写这篇博客是因为写了一篇select2使用黏贴数据选择项目的文章,不执行 preventDefault 之前有一个细节就是黏贴的内容会显示在搜索框上,这样操作使用效果不是太好,调用preventDefault 后即可以使用粘贴板中数据又不影响美观

    47640编辑于 2022-03-28
  • 来自专栏yaphetsfang

    Unable to preventDefault inside passive event listener

    最近做项目经常在 chrome 的控制台看到如下提示: Unable to preventDefault inside passive event listener due to target being Making touch scrolling fast by default 简而言之: 由于浏览器必须要在执行事件处理函数之后,才能知道有没有掉用过 preventDefault() ,这就导致了浏览器不能及时响应滚动 浏览器忽略 preventDefault() 就可以第一时间滚动了。 red, green); } // 在 chrome56 中,照样滚动,而且控制台会有提示,blablabla window.addEventListener('touchmove', e => e.preventDefault 不让控制台提示,而且 preventDefault() 有效果呢?

    1.6K20发布于 2020-07-30
  • 来自专栏赵康的日常专栏

    【前端】stopPropagation, preventDefault, return false的区别

    e.preventDefault()阻止浏览器默认动作 执行监听函数在前, 触发浏览器默认动作在后. 例如:用户点击链接后,阻止在本页面打开链接。 return false等效于同时调用e.preventDefault()和e.stopPropagation() if (ret===false){   event.preventDefault();   event.stopPropagation(); } ---- 详情可以看:stopPropagation, preventDefault 和 return false 的区别

    37220编辑于 2023-10-17
  • 来自专栏全栈程序员必看

    javascript中间preventDefault与stopPropagation角色介绍

    preventDefault的作用是什么方法,它? <script type="text/javascript"> function stopDefault( e ) { if ( e && e.preventDefault ) { e.preventDefault(); } else { window.event.returnValue preventDefault方法解讲到这里,stopPropagation方法呢? 讲stopPropagation方法之前必需先给大家解说一下js的事件代理。 e.cancelBubble = true;// ie下阻止冒泡 } else { //e.preventDefault

    50820编辑于 2022-07-06
  • 来自专栏Rattenking

    Unable to preventDefault inside passive event listener due to target being treated as

    谷歌浏览器的警告: [Intervention] Unable to preventDefault inside passive event listener due to target being treated See https://www.chromestatus.com/features/5093566007214080 造成原因: 由于浏览器必须要在执行事件处理函数之后,才能知道有没有掉用过 preventDefault 浏览器忽略 preventDefault() 就可以第一时间滚动了。 导致的问题: 浏览器在触发touchstart,touchmove事件的时候,e.preventDefault()会被浏览器忽略掉,并不会阻止默认行为。

    1.2K10发布于 2021-01-29
  • 来自专栏全栈程序员必看

    Unable to preventDefault inside passive event listener due to target being treated as passive 怎么办?

    翻译一下:chrome 监听touch类事件报错:无法被动侦听事件preventDefault,是新版本chrome 浏览器报错。 说明:说一下这个 preventDefault()是个什么鬼,这个是取消默认事件的,如果这个函数起作用的,比如默认的表单提交,a链接的点击跳转,就不好用了。 浏览器忽略 preventDefault() 就可以第一时间滚动了。 ('touchmove', func, { passive: true }) 这样会出现新的问题: 如果在以上这 3 个元素的 touchstart 和 touchmove 事件处理函数中调用 e.preventDefault 可以做到: 即不让控制台提示,而且 preventDefault() 有效果呢?

    1.4K10编辑于 2022-11-01
  • 来自专栏李维亮的博客

    jQuery中return false,e.preventDefault(),e.stopPropagation()的区别

    e.preventDefault()阻止事件默认行为。 <script> $("a").click(function (e) { alert("默认行为被禁止喽"); e.preventDefault (); }); </script> 测试 return false等效于同时调用e.preventDefault 如果手上有一份jquery源代码的话,可查看其中有如下代码: if (ret===false){   event.preventDefault();   event.stopPropagation

    66930发布于 2021-07-09
  • 来自专栏yaphetsfang

    移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

    为了解决开发者需要,建议开发者在touchstart时调用event.preventDefault,这样就可以保证内核会一起触发touchmove事件了。 可以通过调用preventDefault()方法,可以阻止后面事件的触发。 我知道event.preventDefault()会阻止a标签默认的动作(跳转到href指定的页面),但是为什么click也不触发了呢? 原来touchmove中添加event.preventDefault方法之后会阻止浏览器默认的滚动。。。 x轴和y轴的移动值,判断当前是往哪个方向滑动,如果是在x轴上滑动(左右),就调用event.preventDefault()方法,如果是在y轴上滑动(上下),就不调用event.preventDefault

    4.1K20发布于 2020-07-30
  • 来自专栏Czy‘s Blog

    默认行为及阻止

    (); }) </script> 阻止默认行为 W3C推荐的阻止默认行为的方式是event.preventDefault(),此方法只会阻止默认行为而不会阻止事件的传播。 (); }) document.addEventListener("contextmenu", (e) => { e.preventDefault(); }) }) document.getElementById("t4").addEventListener("click", (e) => { e.preventDefault(); }) document.getElementById("t5").addEventListener("click", (e) => { e.preventDefault block_id=tuijian_wz https://developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault

    2.2K30发布于 2020-08-27
  • 来自专栏liulun

    一个Electron的设计缺陷及应对方案

    问题描述 要阻止窗口关闭,必须在窗口的关闭事件中,执行preventDefault操作才行,如下代码所示: win.on("close", (e) => { e.preventDefault(); }); 然而这个preventDefault的操作,必须同步调用才能生效,所有异步调用preventDefault的操作都没有任何效果,代码如下所示: win.on("close", async (e) (); //没有任何作用 }); 上述代码中的preventDefault操作就不会起任何作用。 开发者无法在这种异步的询问通知前执行preventDefault操作,就无法正确的阻止窗口关闭。 此时立即调用窗口的close方法,这个窗口的close事件被再次触发,因为winCanBeClosedFlag 变量已经被置为true了,所以不会执行preventDefault操作,窗口被正常关闭。

    1.4K53编辑于 2021-12-23
  • 来自专栏喵喵侠的社区活动征文

    如何防止Vue页面局部元素滚动时,页面整体滚动?

    解决方法 为了防止整个页面滚动(即 body 的滚动),你需要使用 e.preventDefault() 来阻止浏览器的默认行为。 在 @mousewheel.native 事件处理程序中,添加对 e.preventDefault() 的调用即可。 () 的其他作用 e.preventDefault() 除了可以阻止默认的浏览器滚动事件外,还可以用来阻止某些元素的默认行为。 调用 e.preventDefault() 可以阻止这种跳转。 阻止鼠标右键菜单:通常点击鼠标右键会弹出浏览器的上下文菜单。你可以使用 e.preventDefault() 来阻止这种行为。 而e.preventDefault() 仅仅阻止默认行为,而不阻止事件传播。 总结 浏览器的滚动事件需要用preventDefault() 来阻止,这个事件写在某个页面元素上不会影响该元素的正常滚动。

    2.2K10编辑于 2024-09-11
  • 来自专栏其他相关技术

    如何打开一个网站让里面的内容是加载另一个网站域名的内容并且看不出来-优雅草央千澈-其次加入禁止右键点击-禁止选择文本和复制以及禁止键盘快捷键

    禁止右键代码,禁止复制代码:<script> document.addEventListener('contextmenu', event => event.preventDefault()); </script (); } // 禁止Ctrl+Shift+I if (event.ctrlKey && event.shiftKey && event.key === 'I') { event.preventDefault (); } // 禁止Ctrl+Shift+J if (event.ctrlKey && event.shiftKey && event.key === 'J') { event.preventDefault (); } // 禁止Ctrl+Shift+I if (event.ctrlKey && event.shiftKey && event.key === 'I') { event.preventDefault (); } // 禁止Ctrl+U if (event.ctrlKey && event.key === 'U') { event.preventDefault(); } }); </script>

    25300编辑于 2025-01-15
  • 来自专栏吴裕超

    阻止a标签的默认事件及延伸

    ){ e.preventDefault(); }else{ window.event.returnValue == false; } } function fc2 在这种情况下,处理方法有: 1、w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false; preventDefault它是事件对象(Event)的一个方法 当Event 对象的 cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。 ){ 4 e.preventDefault();// 5 }else{ 6 window.event.returnValue = false;//IE 7      ){ e.preventDefault(); //阻止默认浏览器动作(W3C) }else { window.event.returnValue = false

    3.2K60发布于 2018-03-01
  • 来自专栏腾讯IMWeb前端团队

    让 touch 系列事件触发的滚动响应更快

    2背景 如果你在touchstart或touchmove事件处理函数中调用preventDefault(),这将会阻止(页面)滚动。 极个别的例子是,开发者发现(如果不在touchend事件处理函数中调用preventDefault()) click 事件被触发了。 你可以直接在应用中,通过defaultPrevented属性检查preventDefault的调用是否生效。 在更复杂的例子中,你可能需要参考下面的其中一条来解决问题: 如果你的touchstart事件的监听器中,调用了preventDefault(),为阻止触发click事件和浏览器的默认行为,请确保preventDefault 虽然仍需要为移动端的 Safari 调用preventDefault(),然而 Chrome 已经不再推荐网站依靠在touchstart 和 touchmove 事件处理函数中调用preventDefault

    1.5K20编辑于 2022-06-29
  • 来自专栏cloud stdio

    js实现禁止网页缩放(Ctrl+鼠标、+、-缩放有效亲测)

    mousewheel', function(event){ if (event.ctrlKey === true || event.metaKey) { event.preventDefault DOMMouseScroll', function(event){ if (event.ctrlKey === true || event.metaKey) { event.preventDefault event.which === 109 || event.which === 187 || event.which === 189)) { event.preventDefault mousewheel', function(event){ if (event.ctrlKey === true || event.metaKey) { event.preventDefault event.which === 109 || event.which === 187 || event.which === 189)) { event.preventDefault

    1.9K40编辑于 2023-08-08
  • 来自专栏北京百思可瑞教育

    阻止移动端 touchmove 与 scroll 事件冲突的深度解析与解决方案

    ()的精准使用passive事件监听器的配置现代浏览器将touchmove事件的passive默认值设为true,这意味着:// 错误示范:在passive:true的监听器中调用preventDefault ()会报错document.addEventListener('touchmove', function(e) { e.preventDefault(); // 控制台会显示警告}, { passive : true });// 正确做法:显式设置passive:falsedocument.addEventListener('touchmove', function(e) { e.preventDefault ); } function preventDefault(e) { e.preventDefault(); } // 菜单滑动控制 let startX; menu.addEventListener isChildScrolling) { // 允许父容器滚动 return; } e.preventDefault(); e.stopPropagation();

    57710编辑于 2025-09-08
  • 来自专栏方球

    vue 拖拽hooks ts版

    paste, drop } = events const dragEvents = { dragover: (e: DragEvent) => { e.preventDefault e.stopPropagation() hasAndRun(dragover, e) }, dragenter: (e: DragEvent) => { e.preventDefault startHover() hasAndRun(dragenter, e) }, dragleave: (e: DragEvent) => { e.preventDefault ) endHover() hasAndRun(dragleave, e) }, dragstart: (e: DragEvent) => { e.preventDefault isRun } } 注意点 拖拽属性必须明确设置为 draggable='true' 短写模式无效 dragg 需配置 dragover 事件,否则拖拽区内将出现禁止提示 事件设置 e.preventDefault

    1.1K20发布于 2021-01-27
  • 来自专栏Puppeteer学习

    如何阻止冒泡&&浏览器默认行为

    ){ e.preventDefault() }else { e.returnValue = false; } } 这里简单那checkbox做一个小的demo DOCTYPE> <html> <head> <title>preventDefault Demo</title> </head> <body> 同样W3C标准实现中,我们可以通过event.defaultPrevented 来确定event.preventDefault方法是否被调用,基本模式如下: if (e.defaultPrevented preventDefault() on it. event.preventDefault ? event.cancelable ? event.cancelBubble ?

    2.5K40发布于 2019-02-15
  • 来自专栏仙士可博客

    JavaScript停止冒泡和阻止浏览器默认行为

    window.event.returnValue = false : e.preventDefault(); } 以下是具体关于JavaScript停止冒泡和阻止默认行为的详细说明 防止冒泡 w3c的方法是 = false; preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为。 当Event 对象的 cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。 ){ e.preventDefault(); }else{ window.event.returnValue == false; } } return false javascript的return  )          e.preventDefault();      //IE中阻止函数器默认动作的方式      else          window.event.returnValue = 

    2.6K20发布于 2019-12-18
  • 来自专栏小鑫の随笔

    JS 阻止页面滚动

    在升级到 ios11.3 系统后,阻止页面滚动的代码 e.preventDefault 代码失效了。 document.body.addEventListener('touchmove', function (e) { e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果 image.png useCapture:false 表示事件采用冒泡机制(capture 译为 捕获),浏览器默认就是 false passive:false 表示我现在主动告诉浏览器该监听器将使用 e.preventDefault 这将导致设置的 e.preventDefault() 代码失效。 所以 Safari 默认是不会阻止滚动的。 通过 e.preventDefault(); 阻止默认的下拉滑动的效果,通过添加 passive:false 参数来兼容各个浏览器。即可实现阻止移动页面滚动的功能。

    28.7K50编辑于 2022-02-28
领券