首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

仅在父级上捕获或取消JS滚动轮事件-而不是子级

在前端开发中,当我们需要在父级元素上捕获或取消滚动轮事件,而不希望子级元素触发该事件时,可以通过以下方式实现:

  1. 使用事件委托:事件委托是一种将事件处理程序绑定到父级元素上,通过事件冒泡机制来处理子级元素的事件。在这种情况下,我们可以将滚动轮事件绑定到父级元素上,并在事件处理程序中判断事件源是否为子级元素,如果是则取消事件的默认行为。

示例代码如下:

代码语言:txt
复制
// 获取父级元素
var parentElement = document.getElementById('parent');

// 绑定滚动轮事件
parentElement.addEventListener('wheel', function(event) {
  // 判断事件源是否为子级元素
  if (!event.target.closest('#parent')) {
    event.preventDefault(); // 取消事件的默认行为
  }
});

在上述代码中,我们通过addEventListener方法将滚动轮事件绑定到父级元素parentElement上。在事件处理程序中,通过event.target.closest('#parent')判断事件源是否为子级元素,如果不是则调用event.preventDefault()取消事件的默认行为,从而实现仅在父级上捕获或取消滚动轮事件。

  1. 使用事件捕获阶段:事件捕获是事件传播的第一个阶段,当事件发生时,从文档根节点开始向下传播,直到达到事件目标。在这种情况下,我们可以在父级元素上使用事件捕获阶段来捕获滚动轮事件,并在事件处理程序中判断事件源是否为子级元素,如果是则取消事件的默认行为。

示例代码如下:

代码语言:txt
复制
// 获取父级元素
var parentElement = document.getElementById('parent');

// 绑定滚动轮事件,使用事件捕获阶段
parentElement.addEventListener('wheel', function(event) {
  // 判断事件源是否为子级元素
  if (!event.target.closest('#parent')) {
    event.preventDefault(); // 取消事件的默认行为
  }
}, true);

在上述代码中,我们通过addEventListener方法将滚动轮事件绑定到父级元素parentElement上,并将最后一个参数设置为true,表示在事件捕获阶段处理事件。在事件处理程序中,通过event.target.closest('#parent')判断事件源是否为子级元素,如果不是则调用event.preventDefault()取消事件的默认行为,从而实现仅在父级上捕获或取消滚动轮事件。

以上是两种常用的方法来实现仅在父级上捕获或取消JS滚动轮事件,具体使用哪种方法取决于实际需求和项目的架构。在腾讯云的产品中,可以使用云函数(Serverless Cloud Function)来实现事件处理逻辑,具体可以参考腾讯云云函数产品介绍:腾讯云云函数

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Web开发的基本功

浏览器默认行为执行与阻止分析 首先简单回顾下DOM的事件处理过程: DOM0: ? 在图(1)所示的capture phase中, 事件向下冒泡抵达目标的元素。...可以指定事件流类型为冒泡捕获(第三个boolean参数,为false为冒泡类型)。 需要注意的一点是IE仅从IE9开始支持DOM2事件处理方式。...stopPropagation():如果event对象的bubbles属性为true,可以取消时间的进一步冒泡捕获(取决于事件流类型)。...stopImmediatePropagation(): 这是dom3事件中新增的方法,在取消进一步冒泡与捕获的同时,阻止任何事件处理程序被调用。 现有如下代码: <!...通过对子节点的stopPropagation才可以防止节点阻止节点的浏览器默认行为。 But Why?

1.4K130

JavaScript(进阶)

.appendChild(节点) 向节点中添加指定的节点 节点.insertBefore(新节点,旧节点) 将一个新的节点插入到旧节点的前边 节点.replaceChild(新节点,旧节点...) 使用一个新的节点去替换旧节点 节点.removeChild(节点) 删除指定的节点 推荐方式:节点.parentNode.removeChild(节点) # 元素的属性 读取元素的属性...(Bubble) 事件的冒泡指的是事件向上传导,当后代元素事件被触发时,将会导致其祖先元素的同类事件也会触发。...,向目标元素进行事件捕获,但是默认此时不会触发事件 目标阶段 事件捕获到目标元素,捕获结束开始在目标元素触发事件 冒泡阶段 事件从目标元素向他的祖先元素传递,依次触发祖先元素事件 如果希望在捕获阶段就触发事件...向下 } /* * 使用addEventListener()方法绑定响应函数,取消默认行为时不能使用return false * 需要使用event来取消默认行为event.preventDefault

1.5K20
  • JS事件

    (' 冒泡'); }, false); 想搞清楚最终的输出顺序,就不得不从事件流说起。...可以使用侦听器(处理程序)来预订事件,以便事件发生时执行相应代码。 事件流描述的是从页面接收事件的顺序。...: div body html document 也就是说,click 事件首先在元素 div 发生,然后 click 事件沿 DOM 树向上传播,每一的节点都会发生,直至传播到 document...事件冒泡 2. 事件捕获 “Netscape Communicator 团队提出的事件流则为事件捕获事件捕获的思想是不太具体的节点更早的收到事件最具体的节点最后接收到事件。...输出结果 可是,当我们将的冒泡和捕获js中位置调换后,输出的则是……先冒泡,再捕获!如下: ? 输出结果2 这是什么原因呢?? 下期——事件处理顺序,进一步揭晓。

    5.8K10

    字节跳动最爱考的前端面试题:JavaScript 基础

    ,"DOM2事件"规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。...alert('捕获'); }, true); 当容器元素及嵌套元素,即在捕获阶段又在冒泡阶段调用事件处理程序时:事件按DOM事件流的顺序执行事件处理程序: 捕获...冒泡 捕获 冒泡 且当事件处于目标阶段时,事件调用顺序决定于绑定事件的书写顺序,按上面的例子为,先调用冒泡阶段的事件处理程序,再调用捕获阶段的事件处理程序。...在 Web 端,我们常见的就是 DOM 事件: DOM0 事件,直接在 html 元素绑定 on-event,比如 onclick,取消的话,dom.onclick = null,同一个事件只能有一个处理程序...Static 关键字有了解嘛 为这个类的函数对象直接添加方法,不是加在这个函数对象的原型对象 (3)问:事件循环机制 (Event Loop) 事件循环机制从整体上告诉了我们 JavaScript

    1.4K20

    面试感悟:当经历所有大厂的实习面试后

    (解决元素高度坍陷问题) 一个块元素如果没有设置height,其height由元素撑开,对子元素使用了浮动之后,元素就会脱离文档流也就是说,及元素中没有内容可以撑开其高度,这样元素height...都处在div的同一个BFC区域之内 4.分属于不同的BFC时,可以阻止margin重叠 复制代码 三、js面试篇 1、前端事件事件流描述的是从页面中接受事件的顺序,可以分为:事件捕获阶段 处于目标阶段...但是如果要实现先冒泡后捕获的效果,对于同一个事件,监听捕获和冒泡,分别对应相应的处理函数,监听到捕获事件,先暂缓执行,直到冒泡事件捕获后再执行捕获事件。...通过事件冒泡,元素可以监听到元素事件的触发通过判断事件发生元素DOM的类型,来做出不同的响应。...举例子: 最经典的就是ui和li标签的事件监听,比如我们在添加事件的时候,采用事件委托机制,不会在li标签上直接添加,而是在ul元素添加 好处:可以比较合适动态元素的绑定,新添加的元素也会监听函数

    1.2K00

    协程中的取消和异常 | 异常处理详解

    当一个协程由于一个异常运行失败时,它会传播这个异常并传递给它的。接下来,级会进行下面几步操作: 取消它自己的取消它自己; 将异常传播并传递给它的。...SupervisorJob 不会取消它和它自己的,也不会传播异常并传递给它的,它会让协程自己处理异常。...它们会创建一个作用域 (使用一个 Job SupervisorJob 作为),可以帮助您根据自己的逻辑组织协程 (例如: 您想要进行一组平行计算,并且希望它们之间互相影响或者相安无事的时候)。...如果您在扩展中使用 coroutineScope 代替 supervisorScope ,错误就会被传播,作用域最终也会被取消。 小测验: 谁是我的?...△ Child 1 和 Child 2 的是 Job 类型,不是 SupervisorJob 这样一来,无论 Child 1 Child 2 运行失败,错误都会到达作用域,所有该作用域开启的协程都会被取消

    1.1K20

    如何优雅的处理协程的异常?

    当一个协程发生了异常,它将把异常传播给它的协程,协程会做以下几件事: 取消其他协程 取消自己 将异常传播给自己的协程 异常最终将传播至继承结构的根部。...通过下面的代码段,你能确定 child#1 的是哪一种 Job 吗?...因为 scope 的直接协程是由 scope.launch 启动的,async 继承了协程上下文中的 Job ,导致它会自动向传播异常。...: 何时⏰ :是被可以自动抛异常的协程抛出的(launch,不是 async) 何地 :在 CoroutineScope 或者根协程的协程上下文中(CoroutineScope 的直接协程或者 supervisorScope...内部 launch 启动的协程一旦发生异常会自动传播到协程,协程并不知道 handler 的存在,所以异常会被直接抛出。

    1.1K30

    JQuery Ztree 树插件配置与应用小结

    都不影响按下 Ctrl Cmd 键可以让已选中的节点取消选中状态( 取消选中状态可以参考 setting.view.autoCancelSelected ) setting 举例: 禁止多点同时选中的功能...click 事件,并且根据返回值确定是否允许进入名称编辑状态 此事件回调函数最主要是用于捕获编辑按钮的点击事件,然后触发自定义的编辑界面操作。...2、需要首先加载 jquery-1.4.2.js 其他更高版本的 jQuery 。...参数说明 treeNode 需要勾选 取消勾选 的JSON节点数据 请务必保证此节点数据对象 是 zTree 内部的数据对象 checked true 表示勾选节点; false 表示节点取消勾选...ztree_nodes_list = [] def get_sub_resource(resource, father_node): ''' 获取资源

    7.2K40

    Web前端事件

    事件事件事件是与浏览器文档交互的瞬间,如点击按钮,填写表格等,它是JS与HTML之间交互的桥梁。DOM是树形结构,若同时给父子结点绑定了相同的事件,那么他们的执行顺序是什么样子的呢?...事件捕获 Netscape团队提出的另一种事件流叫事件捕获事件捕获的思想是不太具体的节点应该更早接收到事件最具体的节点应该最后接收到事件。...事件模型 DOM0事件 这样的事件模型中,事件是没有事件流的概念的,事件的绑定比较简单: 直接在HTML中绑定事件处理函数 通过在js中获取元素来绑定事件...IE事件 IE事件取消事件流中的事件捕获过程。...事件在冒泡过程中会上传到节点,因此可以把子节点的监听函数定义在节点,由节点的监听函数统一处理多个子元素的事件,这种方式称为事件代理(Event delegation)。

    3.3K00

    一次关于js事件出发机制反常的解决记录

    几个概念 捕获阶段:事件对象通过目标的祖先从传播窗口到目标的。...这个类别中的事件被认为是可取消的,他们取消的行为被称为他们的默认行为。 取消事件:可取消事件对象可以与一个多个“默认动作”相关联。要取消事件,请调用该preventDefault()方法。...//仅仅是在HTML事件属性 和 DOM0事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。...useCapture默认为true,导致点击元素时元素的事件先响应了,于是我的办法是在元素的事件里进行判断 比如容器为#a,动态插入的元素为#b,在#a监听click事件,判断event.target.id...是不是等于b即可,如果.bclass这种,以此类推。

    1.5K50

    事件

    事件捕获 事件捕获(event capturing),不太具体的节点早接收到事件最具体的节点最后接收事件事件捕获的用意在于在事件到达预定目标之前捕获它。..."); }, true); “DOM2事件”明确要求捕获阶段不会涉及事件目标,但IE9、Safari、Chrome、Firefox和Opera及更高版本浏览器都会在捕获阶段触发事件对象事件...最好只在需要在事件到达目标之前捕获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要,不建议在事件捕获阶段注册事件处理程序。 4....取消事件默认行为 stopPropagation() Function 取消事件的进一步捕获冒泡 target Element 事件的目标 type String 被触发的事件类型 view AbstractView...事件目标为被插入的节点,event.relatedNode属性的值是节点引用。 接着会在新插入的节点触发DOMNodeInsertIntoDocument事件

    3.3K51

    Kotlin协程上下文和异常处理

    ,所以job的调度器被覆盖,是Dispatchers.IO不是类的Dispatchers.Main 异常 异常的传播 协程构建器有2种传播形式: 自动传播异常(launch和actor)、向用户暴露异常...(async和produce) 当这些构建器用于创建一个根协程时(该协程不是另一个协程的协程),前者这类构建器异常发生时会第一时间被抛出,而后者则依赖用户来最终消费异常,例如通过调用awaitreceive...非根协程产生的异常总是被传播 异常传播的特性 当一个协程由于一个异常运行失败时,它会传播这个异常并传递给它的。...接下来级会进行下面几步操作: 取消它自己的协程 取消它自己 将异常传播并传递给它的 SupervisorJob和SupervisorScope 使用SupervisorJob时,一个协程的运行失败不会影响其他的协程...异常的捕获 使用CoroutineExceptionHandler对协程的异常进行捕获 时机:异常是被自动抛出异常的协程抛出的(使用launch,不是async时) 位置:在CoroutineScope

    8010

    腾讯前端一面常考面试题_2023-03-13

    事件流)冒泡和捕获参考 前端进阶面试题详细解答HTML5的离线储存怎么使用,它的工作原理是什么离线存储指的是:在用户没有与因特网连接时,可以正常访问站点应用,在用户与因特网连接时,更新用户机器的缓存文件...需要注意的是,立即resolve()的 Promise 对象,是在本轮“事件循环”(event loop)的结束时执行,不是在下一轮“事件循环”的开始时。...,"DOM2事件"规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。...虽然捕获阶段在规范中规定不允许响应事件,但是实际还是会执行,所以有两次机会获取到目标对象。当容器元素及嵌套元素,即在捕获阶段又在冒泡阶段调用事件处理程序时:事件按DOM事件流的顺序执行事件处理程序:捕获捕获冒泡冒泡且当事件处于目标阶段时

    1.1K40

    前端学习(51)~事件的传播和事件冒泡

    DOM事件事件传播的三个阶段是:事件捕获事件冒泡和目标。 事件捕获阶段:事件从祖先元素往元素查找(DOM树结构),直到捕获事件目标 target。...事件冒泡阶段:事件事件目标 target 开始,从子元素往冒泡祖先元素冒泡,直到页面的最上一标签。...重点:捕获阶段,事件依次传递的顺序是:window --> document --> html--> body --> 元素、元素、目标元素。...事件冒泡 事件冒泡: 当一个元素事件被触发的时候(比如说鼠标点击了一个按钮),同样的事件将会在那个元素的所有祖先元素中被触发。...这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。 通俗来讲,冒泡指的是:元素的事件被触发时,元素的同样的事件也会被触发。取消冒泡就是取消这种机制。

    97020

    JS事件

    属性可以获取到当前元素所有元素,不包括文本节点 区分概念: 节点包括文本节点,元素不包括文本节点 firstChild获取当前元素第一个节点 VS firstElementChild获取当前元素第一个元素....appendChild()----向一个节点中添加一个节点 整合上面操作的小案例 节点.insertBefore(新节点,旧节点): 在指定子节点前插入新的节点 节点.replaceChild...----火狐不支持,由DOMMouseScroll替代 判断滚轮上还是下----火狐不支持,由detail替代 取消滚动条随滚轮移动的默认行为 键盘事件 浏览器对象模型---navigator...(); }; return false; }; }; 鼠标点击移动div,那么就让鼠标呆在点击出,不是跑到左上角...",function(){ alert("鼠标滚轮"); },false) ---- 判断滚轮上还是下----火狐不支持,由detail替代 ---- 取消滚动条随滚轮移动的默认行为

    12.6K10

    100个最常问的JavaScript面试问答-第2部分(共10部分)

    通过与Vanilla JS中的对象进行交互使用jQuery的prop()方法,可以访问property。 attributes位于HTML中,不是DOM中。...在“冒泡阶段”中,事件冒泡向上传播至,祖父,祖父的,直到到达窗口为止;而在“捕获阶段”中,事件从窗口开始向下直到触发元素事件event.target。 此过程称为事件传播。...在Bubbling Phase中,事件冒泡,或者到达,祖父,祖父的,直到到达窗口为止。...答: 当事件发生在DOM元素时,该事件并不完全发生在那个元素。 在捕获阶段,事件从窗口开始一直到触发事件的元素。...如果在上下文菜单中使用,它将阻止其显示显示。 当event.stopPropagation()方法停止事件的传播时。 它阻止了事件在冒泡捕获阶段发生。

    1.1K31

    ReactPortals传送门

    MouseEnter: 当鼠标光标进入一个元素时触发,该事件仅在鼠标从元素的外部进入时触发,不会对元素内部的元素产生影响。...MouseLeave:当鼠标光标离开一个元素时触发,该事件仅在鼠标从元素内部离开时触发,不会对元素外部的元素产生影响。...需要注意的是MouseEnter/MouseLeave是在捕获阶段执行事件处理函数的,不能在冒泡阶段过程中进行,MouseOver/MouseOut是可以在捕获阶段和冒泡阶段选择一个阶段来执行事件处理函数的...事件也是同样会多次触发,可以将元素与所有元素都看作独立区域,事件会冒泡到元素来执行事件绑定函数,这可能导致重复的事件处理和不必要的逻辑触发,MouseEnter和MouseLeave事件不会重复触发...简化交互逻辑: MouseEnter和MouseLeave事件的特性使得处理鼠标移入和移出的交互逻辑变得更直观和简化,我们可以仅关注元素本身的进入和离开,不需要处理元素元素的事件,这种简化有助于提高代码的可读性和可维护性

    25250

    金九银十,为期2周的前端面经汇总(初级前端)

    (一般是 相对定位),以这个为参照物 如果没有定位,那么以浏览器窗口为参照物。...组件向组件传值 组件绑定一事件,并通过$emit来触发这个事件 兄弟组件传值 通过eventbus进行兄弟组件通讯, emit 触发事件函数, on 监听回调,回调函数接收所有触发事件时传入的参数...在另一组件import 导入,并在components中注册(install函数注册组件),组件需要数据,在props中接受。组件修改好数据后采用$emit方法将数据传递给组件。...1.2 插槽显不显示、怎样显示是由组件来控制的,插槽在哪里显示就由组件来进行控制 插槽使用 2.1 默认插槽 在组件中写入slot,slot所在的位置就是组件要显示的内容 2.2 具名插槽...,防止重复渲染DOM keep-alive 包裹动态组件时,会缓存不活动的组件实例,不是销毁它们。

    3K20

    2020年前端面试题及答案_结构化面试题库及答案

    6、事件模型的理解? 冒泡型事件:当使用冒泡型事件时,元素先触发,元素后触发。 捕获事件:当使用捕获事件时,元素先触发,元素后触发。 7、new操作符具体做了干了什么?...函数体内的this对象,就是定义时所在的对象,不是使用时所在的对象; 不可以当作构造函数,也就是说不能使用new关键在,否者会抛出一个错误; 不可以使用arguments对象,该对象在函数体内不存在...19、说说什么是事件代理? 事件代理又称之为事件委托。就是把原本需要绑定的事件委托给元素,让元素担当事件监听的职务。 20、说说ajax的原理?...防抖:当滚动事件中需要进行复杂计算实现一个按钮的防二次点击操作,可以通过函数防抖来实现; 节流:节流与防抖的本质不一样。防抖是把多次操作当作一次来执行,节流是间隔一段时间执行操作。...事件流分为两种:捕获事件流和冒泡事件流。 48、说说从输入URL到看到页面发生的全过程?

    2.5K20

    前端面试之React

    所以 useCallback 常用记忆事件函数,生成记忆后的事件函数并传递给组件使用。 useMemo 更适合经过函数计算得到一个确定的值,比如记忆组件。...官方建议优先使用useEffect React 组件通信方式 react组件间通信常见的几种情况: 组件向组件通信 组件向组件通信 跨组件通信 非嵌套关系的组件通信 1)组件向组件通信...是先在组件绑定属性设置为一个函数,当组件需要给组件传值的时候,则通过props调用该函数将参数传入到该函数当中,此时就可以在组件中的函数中接收到该参数了,这个参数则为组件传过来的值 /...}> {show && } React 事件绑定原理 React并不是将click事件绑在该div的真实DOM,而是在document处监听所有支持的事件...另外冒泡到 document 事件不是原生浏览器事件,而是 React 自己实现的合成事件(SyntheticEvent)。

    2.5K20
    领券