html+a标签自动点击事件,父元素<a>标签的默认行为以及click事件之间的相互影响...

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

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

a标签内部点击事件失效

*{

margin:0;

padding:0;

}

.father{

display:block;

width:500px;

height:200px;

background-color:rgb(210,111,30);

}

.child-one{

display:block;

width:200px;

height:50px;

background-color:rgb(174,43,226);

}

.child-two{

display:block;

width:200px;

height:50px;

background-color:rgb(43,226,67);

}

.child-three{

display:block;

width:200px;

height:50px;

background-color:rgb(43,137,226);

}

父标签

子标签1

子标签2

子标签3

letfather=document.querySelector('.father');

letele1=document.querySelector('.child-one');

letele2=document.querySelector('.child-two');

letele3=document.querySelector('.child-three');

ele1.addEventListener('click',function(e){

e.stopPropagation();

//e.preventDefault();

alert('clickchild-one')

window.location.href='child-one'

},false)

ele2.addEventListener('click',function(e){

e.stopPropagation();

alert('clickchild-two')

//window.location.href='child-two'

},false)

ele3.addEventListener('click',function(e){

alert('clickchild-three')

window.location.href='child-three'

},false)

father.addEventListener('click',function(e){

alert('clickfather')

window.location.href='father'

},false)