摘要：开发过程中遇到问题，简单写个运行环境为描述一下这个问题，当标签内部存在嵌套时，父元素标签的默认行为以及子元素绑定的事件的响应之间存在影响。
2018-08-07 Question about work
开发过程中遇到问题，简单写个demo 运行环境为Chrome 68
描述一下这个问题，当标签内部存在嵌套时， 父元素标签的href默认行为以及子元素绑定的click事件的响应之间存在影响。页面结构：
a标签内部点击事件失效
父标签
子标签1
示例如下图(如果a标签嵌套，浏览器解析错误，所以用object标签包裹了一层)。
执行操作：当点击父标签时，先弹出111，然后跳转父标签的href链接。
说明onclick执行先于href
当点击child-one时，执行元素绑定的click事件，会弹出alert，但是location仍然跳转到了father。
阻止冒泡后，执行结果仍然不符合预期。添加preventDefault之后，执行了子元素自己的跳转。
当点击child-two时，弹出响应信息，然后会跳转href的链接。
当点击child-three时，先弹出click child-three，然后是href child-three，说明click事件先于href执行。
上面4个操作除了2之外都很好理解，2中，为什么已经在阻止了事件冒泡之后，仍然执行了父元素中href的跳转。
思考：首先可以肯定的是，事件冒泡确实被阻止了，因为父元素的onclick并没有执行，所以猜测，标签的默认行为是无法通过取消冒泡来阻止的，就算事件没有冒泡到父元素，子元素在父元素标签内部，仍然会执行标签默认行为。
解决方法：
在子元素中添加e.preventDefault()阻止默认行为
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/52972.html
摘要：开发过程中遇到问题，简单写个运行环境为描述一下这个问题，当标签内部存在嵌套时，父元素标签的默认行为以及子元素绑定的事件的响应之间存在影响。 2018-08-07 Question about work 开发过程中遇到问题，简单写个demo 运行环境为Chrome 68 描述一下这个问题，当标签内部存在嵌套时， 父元素标签的href默认行为以及子元素绑定的click事件的响应之间存在...
摘要：原文地址背景开发过程中遇到问题，简单写个运行环境为描述一下这个问题，当标签内部存在嵌套时，父元素标签的默认行为以及子元素绑定的事件的响应之间存在影响。 原文地址 背景 开发过程中遇到问题，简单写个demo 运行环境为Chrome 68 描述一下这个问题，当a标签内部存在嵌套时， 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响。页面结构： ...
摘要：原文地址背景开发过程中遇到问题，简单写个运行环境为描述一下这个问题，当标签内部存在嵌套时，父元素标签的默认行为以及子元素绑定的事件的响应之间存在影响。 原文地址 背景 开发过程中遇到问题，简单写个demo 运行环境为Chrome 68 描述一下这个问题，当a标签内部存在嵌套时， 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响。页面结构： ...
摘要：文档类型，它位于文档中最前面的位置，处于标签之前。如果你想制作符合标准的页面，一个必不可少的关键组成部分就是的声明。类似的，如果文档包含的是标记，但是声明指定是也是不恰当的。如何触发两种模式不存在或形式不正确会导致和文档以混杂模式呈现。 1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。 1、包含与被包含 A.contains(B)检测B节点是否是A节点的子...
阅读 2226·2021-11-15 11:37
阅读 2600·2021-09-23 11:21
阅读 2925·2021-09-07 10:11
阅读 3142·2019-08-30 15:53
阅读 2789·2019-08-29 15:13
阅读 1588·2019-08-26 13:57
阅读 1081·2019-08-26 12:23
阅读 2371·2019-08-26 11:51
