父元素<a>标签的默许行为以及click事件之间的彼此影响

本篇文章给大家带来的内容是对于父元素a标签的href默许行为以及子元素绑定的click事件的相应之间存在影响，有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。 本篇文章给大家带来的内容是对于父元素a标签的href默许行为以及子元素绑定的click事件的相应之间存在影响，有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

开发历程中碰到题目，简略写个demo 运转环境为Chrome 68

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

    
    
    
    
    



    父标签
        
            子标签1
        
        
        
    
    《script》    
        let father = document.querySelector('.father');
        let ele1 = document.querySelector('.child-one');
        let ele2 = document.querySelector('.child-two');
        let ele3 = document.querySelector('.child-three');

        ele1.addEventListener('click', function (e) {
            e.stopPropagation();
            // e.preventDefault();
            alert('click child-one')
            window.location.href = 'child-one'
        }, false)

        ele2.addEventListener('click', function (e) {
            e.stopPropagation();
            alert('click child-two')
            // window.location.href='child-two'
        }, false)

        ele3.addEventListener('click', function (e) {
            alert('click child-three')
            window.location.href = 'child-three'
        }, false)

        father.addEventListener('click', function (e) {
            alert('click father')
            window.location.href = 'father'
        }, false)

    《script》

示例如下图(要是a标签嵌套，阅读器解析差错，所以用object标签包裹了一层)。

所以推测，标签的默许行为是没法通过取消冒泡来阻止的，就算事件没有冒泡到父元素，子元素在父元素标签内部，依然会施行标签默许行为。

解决办法：

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

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

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

相干文章举荐：

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

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

以上就是父元素标签的默许行为以及click事件之间的彼此影响的细致内容，更多请关注 百分百源码网 其它相干文章！