开发过程中遇到问题，简单写个demo运行环境为Chrome68
描述一下这个问题，当a标签内部存在嵌套时，父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响。页面结构：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>a标签内部点击事件失效</title>
<style>
*{
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);
}
</style>
</head>
<body>
<aclass="father"href="father"onclick="alert(111)">父标签
<spanclass="child-one">
子标签1
</span>
<object>
<aclass="child-two"href="child-two">
子标签2
</a>
</object>
<object>
<aclass="child-three"href="javascript:alert('href:child-three')">
子标签3
</a>
</object>
</a>
<script>
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)
</script>
</body>
</html>
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h54952.shtml
