本篇文章给大家分享的是有关父元素标签的默认行为以及click事件之间有什么相互关系，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

10年积累的成都网站建设、成都做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有西工免费网站建设让你可以放心的选择与我们合作。

开发过程中遇到问题，简单写个demo   运行环境为Chrome 68

描述一下这个问题，当a标签内部存在嵌套时， 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响。页面结构：

    
    
    
    
    



    父标签
        
            子标签1
        
        
        
    
    

示例如下图(如果a标签嵌套，浏览器解析错误，所以用object标签包裹了一层)。

执行操作：

1. 当点击父标签时，先弹出111，然后跳转父标签的href链接。
   说明onclick执行先于href

2. 当点击child-one时，执行元素绑定的click事件，会弹出alert，但是location仍然跳转到了father。
   阻止冒泡后，执行结果仍然不符合预期。添加preventDefault之后，执行了子元素自己的跳转。

3. 当点击child-two时，弹出响应信息，然后会跳转href的链接。

4. 当点击child-three时，先弹出click child-three，然后是href child-three，说明click事件先于href执行。

上面4个操作除了2之外都很好理解，2中，为什么已经在阻止了事件冒泡之后，仍然执行了父元素中href的跳转。

思考：

首先可以肯定的是，事件冒泡确实被阻止了，因为父元素的onclick并没有执行。
所以猜测，标签的默认行为是无法通过取消冒泡来阻止的，就算事件没有冒泡到父元素，子元素在父元素标签内部，仍然会执行标签默认行为。

解决方法：

在子元素中添加e.preventDefault()阻止默认行为

父元素不使用标签，使用其他标签绑定click事件且子元素阻止冒泡

父元素不使用href属性，直接在标签上绑定click事件

相关文章推荐：

link标签链接CSS和@import加载有什么区别？

HTML标签：img标签的用法总结

以上就是父元素标签的默认行为以及click事件之间有什么相互关系，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。