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

li单击监听程序未触发,因为div下嵌了e.stopPropagation

问题描述:li单击监听程序未触发,因为div下嵌了e.stopPropagation。

解释:在这个问题中,li元素的点击事件监听程序没有被触发,原因是在li元素的父元素div上使用了e.stopPropagation()方法。e.stopPropagation()是一个事件方法,用于阻止事件冒泡,即阻止事件从子元素向父元素传播。

解决方法:要解决这个问题,可以尝试以下几种方法:

  1. 移除e.stopPropagation()方法:如果在div元素上使用e.stopPropagation()方法是无意的,可以直接移除该方法调用,这样li元素的点击事件就能正常触发了。
  2. 将事件监听程序绑定到div元素上:如果需要在div元素上使用e.stopPropagation()方法,并且希望li元素的点击事件能够触发,可以将事件监听程序绑定到div元素上,而不是li元素上。这样点击li元素时,事件会先触发li元素上的点击事件,然后再触发div元素上的点击事件。
  3. 使用事件委托:如果无法修改事件监听程序的绑定位置,可以考虑使用事件委托的方式来解决。将事件监听程序绑定到div元素上,然后通过事件冒泡的方式捕获到li元素的点击事件,并在事件处理程序中进行相应的操作。

总结:在这个问题中,li单击监听程序未触发的原因是div下嵌了e.stopPropagation()方法。解决方法可以是移除该方法调用、将事件监听程序绑定到div元素上或使用事件委托的方式来处理。具体的解决方法需要根据实际情况进行选择和调整。

相关链接:腾讯云提供了丰富的云计算产品和服务,包括云服务器、云数据库、云存储等。您可以访问腾讯云官方网站了解更多产品和服务详情:https://cloud.tencent.com/

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

相关·内容

事件高级

比如: 谁绑定这个事件。 鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置。 键盘触发事件的话,会得到键盘的相关信息,如按哪个键。...常情况terget 和 this是一致的, 但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行),  这时候this指向的是父元素,因为它是绑定事件的元素对象...,  而target指向的是子元素,因为他是触发事件的那个具体元素对象。...console.log(this); }); 事件冒泡的e.target和this abc...事件委托的原理 给父元素注册事件,利用事件冒泡,当子元素的事件触发,会冒泡到父元素,然后去控制相应的子元素。 事件委托的作用 我们只操作了一次 DOM ,提高了程序的性能。

1.2K10

事件高级

当你单击一个div时,同时你也单击div的父元素,甚至整个页面。 ​ 那么是先执行父元素的单击事件,还是先执行div单击事件 ??? 事件流描述的是从页面中接收事件的顺序。...比如:我们给页面中的一个div注册单击事件,当你单击div时,也就单击body,单击html,单击document。 ?...比如: 谁绑定这个事件。 鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置。 键盘触发事件的话,会得到键盘的相关信息,如按哪个键。...常情况terget 和 this是一致的, 但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行), 这时候this指向的是父元素,因为它是绑定事件的元素对象..., 而target指向的是子元素,因为他是触发事件的那个具体元素对象。

1.5K41
  • 事件高级

    当你单击一个div时,同时你也单击div的父元素,甚至整个页面。 ​ 那么是先执行父元素的单击事件,还是先执行div单击事件 ??? 事件流描述的是从页面中接收事件的顺序。...比如:我们给页面中的一个div注册单击事件,当你单击div时,也就单击body,单击html,单击document。 ?...常情况terget 和 this是一致的, 但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行), 这时候this指向的是父元素,因为它是绑定事件的元素对象..., 而target指向的是子元素,因为他是触发事件的那个具体元素对象。    ...以上案例:给ul注册点击事件,然后利用事件对象的target来找到当前点击的li ,因为点击li,事件会冒泡到ul上, ul有注册事件,就会触发事件监听器。

    1.4K20

    「Web编程API」- 03

    当你单击一个div时,同时你也单击div的父元素,甚至整个页面。 那么是先执行父元素的单击事件,还是先执行div单击事件 ???...比如:我们给页面中的一个div注册单击事件,当你单击div时,也就单击body,单击html,单击document。 当时的2大浏览器霸主谁也不服谁!...比如: 谁绑定这个事件。 鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置。 键盘触发事件的话,会得到键盘的相关信息,如按哪个键。...常情况terget 和 this是一致的,但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行),这时候this指向的是父元素,因为它是绑定事件的元素对象...,而target指向的是子元素,因为他是触发事件的那个具体元素对象。

    1.4K50

    JavaScript——DOM事件高级

    ,是一个布尔值,默认是false 注:同一个元素同一个事件可以添加多个监听器(事件处理程序) 按钮 按钮 </...() 阻止冒泡  标准 非标准一般指在ie6-ie8中支持 e.target和this区别 e.target 返回的是触发事件的对象(元素),点击那个元素,就返回那个元素。...原理:不是每个子节点单独设置事件监听器,而是事件监听器设置在父节点上,然后利用冒泡原理影响设置每个子节点。 作用:只操作一次DOM,提高程序的性能。...键盘事件 触发条件 onkeyup 某个键盘按键被松开时触发 onkeydown 某个键盘按键被按触发 onkeypress 某个键盘被按触发 但不识别功能键 keyup按键弹起时触发:...= function () { console.log('我被按'); } 注意: 如果使用addEventListener不需要加on keypress是某个按键被按触发

    1.8K10

    前端成神之路-WebAPIs03

    当你单击一个div时,同时你也单击div的父元素,甚至整个页面。 那么是先执行父元素的单击事件,还是先执行div单击事件 ??? ?...比如:我们给页面中的一个div注册单击事件,当你单击div时,也就单击body,单击html,单击document。 ? 当时的2大浏览器霸主谁也不服谁!...比如: 谁绑定这个事件。 鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置。 键盘触发事件的话,会得到键盘的相关信息,如按哪个键。...常情况terget 和 this是一致的, 但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行), 这时候this指向的是父元素,因为它是绑定事件的元素对象..., 而target指向的是子元素,因为他是触发事件的那个具体元素对象。

    3K20

    js 事件笔记

    2、常见的事件 事件是某个行为或者触发,比如点击、鼠标移动、提交表单,滚动菜单等等 二、事件流 1、事件流的作用 事件流描述的是从页面中接收事件的顺序,比如有两个嵌套的div,点击内层的div,这时候是内层的...三、事件处理程序(事件侦听器(listener)) 1、概念 事件处理程序:事件触发后,执行响应对应事件的程序。...3、DOM2事件处理程序 3.1简介 DOM2事件处理程序可以解决不能绑定多个事件处理函数的问题 DOM2级事件定义两个方法用于处理指定和删除事件处理程序的操作: addEventListener removeEventListener...如果该属性为false,div.addEventListener方法在冒泡阶段监听不会触发。...keyup 按键按松开的时候触发, change 比如input失去焦点并且值发生了改变 submit 表单提交的时候触发 scroll 页面滚动的时候触发,注意使用函数节流 resize 页面面积变化触发

    11K21

    5、React组件事件详解

    1、事件代理 区别于浏览器事件处理方式,React并未将事件处理函数与对应的DOM节点直接关联,而是在顶层使用 一个全局事件监听监听所有的事件; React会在内部维护一个映射表记录事件与组件事件处理函数的对应关系...> 单击原始事件触发 ) } } export default ReactEvent 合成事件和原生事件混合使用...( 单击事件触发 )..." onClick={this.onReactChildClick}>子元素单击事件触发 ) } } export default...ReactEvent 通过设置原生事件绑定为冒泡阶段调用,且每次测试单击子元素按钮: 在子元素原生事件程序中阻止事件传播,则打印出: 子元素原生事件绑定事件触发; 在父元素元素事件程序中阻止事件传播

    3.7K10

    事件

    事件流 事件流描述的是从页面中接收事件的顺序,比如有两个嵌套的div,点击内层的div,这时候是内层的div触发click事件还是外层先触发?...,事件处理程序在元素的作用域运行,this就是当前元素,所以点击button结果是:btnClick 这样还有一个好处,我们可以删除事件处理程序,只需把元素的onclick属性赋为null即可。...) e.stopPropagation(); else e.cancelBubble = true; } 1: DOM0 事件和DOM2级在事件监听使用方式上有什么区别...缺点: 一个事件处理程序只能对应一个处理函数,设置第二个事件时候,因为是赋值,所以第二个事件会覆盖第一个事件。...DOM2级事件处理方式: DOM2级事件处理方式指定,添加事件处理程序和删除事件处理程序的方法。

    1.4K30

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

    ();  }) 借此问题,复习js事件,先看一几个定义 先来看事件注册 // IE以外的其他浏览器 // target :文档节点、document、window 或 XMLHttpRequest...// useCapture :是否使用捕捉,一般用 false,事件触发时,会将一个 Event 对象传递给事件处理程序。...再上个小demo 点我试试 s1 s2</div...,可能部分浏览器把事件的useCapture默认为true,导致点击子元素时父元素的事件先响应,于是我的办法是在父元素的事件里进行判断 比如容器为#a,动态插入的元素为#b,在#a上监听click事件...我们经常能遇到阻止冒泡,但是阻止捕获一般不会遇到,因为浏览器一般默认就给我们阻止,只能说什么情况都有啊,万事还是得考虑周全。

    1.5K50

    面试官:哪些浏览器事件不会冒泡?

    ('触发冒泡阶段');}, false)具体区别在第三个参数,w3c规定true表示捕获阶段触发,false表示冒泡阶段触发,默认false。...focus、blur、resize 这几个事件和 scroll 道理是一样的,都不会触发冒泡,所以事件也都不能通过阻止冒泡取消,它们理解起来比较直观,就不多做阐述。... 假设给 ul 设置 mouseover 事件,在鼠标经过 ul 时因为 ul 中还有 li 元素,鼠标每经过一个...li 元素就会冒泡到 ul 上的 mouseover,造成多次触发:document.getElementById('outer').addEventListener('mouseover',...())才能解决多次触发的问题,不过鼠标从 li 移出到 ul 上还是触发了 ul 的监听事件,其实这并不符合常理,因为此时鼠标还是在 ul 内的。

    1.8K20

    JavaScript小技能:事件

    在现代浏览器中,默认情况,所有事件处理程序都在冒泡阶段进行注册。 捕获阶段:浏览器检查元素的最外层祖先,是否在捕获阶段中注册一个onclick事件处理程序,如果是,则运行它。...冒泡阶段:浏览器检查实际点击的元素是否在冒泡阶段中注册一个onclick事件处理程序,如果是,则运行它。然后它移动到下一个直接的祖先元素,并做同样的事情,直到它到达元素。...事件委托: 如果你想要在大量子元素中单击任何一个都可以运行一段代码,您可以将事件监听器设置在其父节点上,并让子节点上发生的事件冒泡到父节点上,而不是每个子节点单独设置事件监听器。...侦听事件发生的结构称为事件监听器(Event Listener),响应事件触发而运行的代码块被称为事件处理器(Event Handler)。...对于事件处理程序属性来说,这是不可能的,因为后面任何设置的属性都会尝试覆盖较早的属性。

    1.4K10

    JavaScript进阶内容——DOM详解

    JavaScript进阶内容——DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习 首先我们思考一:JavaScript是用来做什么的?...onmouseup 鼠标弹起触发 onmousedown 鼠标按触发 操作元素 我们学习事件的目的就是为了对元素进行修改 下面我们依次介绍一些操作元素的方法: 元素内容修改 元素内容修改有两种方法...,而是将事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点 事件委托的作用: 我们仅需要操作一次DOM,提高了程序的性能 案例解释: <!...onmouseup 鼠标弹起触发 onmousedown 鼠标按触发 下面我们再介绍一些另类的鼠标事件: 禁止右键选中: document.addEventListener('contextmenu...onkeydown 某个键盘按键被按触发 onkeypress 某个键盘按键被按触发(不能识别功能键,如ctrl,shift,左右箭头) 注意: 三个时间的执行顺序:keydown -> keypress

    1.5K20
    领券