18910140161

父元素<a>标签的默认行为以及click事件之间的相互影响

顺晟科技

2021-06-16 10:29:49

161

开发过程中遇到问题,简单写个演示运行环境为Chrome68

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

!DOCTYPEhtml

htmllang='en '

' UTF-8 '

元名称='视口'内容='宽度=设备宽度,初始比例=1.0 '

元http-equiv=' X-UA-兼容'内容=' ie=edge '

标题a标签内部点击事件失效/title

风格

*{

边距n:0

padding:0

}。父亲{

显示:块

宽度宽度:500像素

高度:200像素

背景-color:rgb(210,111,30);

}。child-one{

显示:块

宽度宽度:200像素

高度:50像素

背景色:rgb(174,43,226);

}。两个孩子{

显示:块

宽度宽度:200像素

高度:50像素

背景色:rgb(43,226,67);

}。儿童-三岁

显示:块

宽度宽度:200像素

高度:50像素

背景色:rgb(43,137,226);

}

/style

/head

身体

aclass='父亲href='父亲onclick='alert(111)'父标签

spanclass='child-one '

子标签一

/span

目标

a lass=' child-two ' href=' child-two '

子标签2

/a

/object

目标

a lass=' child-third ' href=' JavaScript : alert(' href : child-third ')'

子标签3

/a

/object

/a

脚本

让父亲=document.querySelector(' .父亲');

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

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

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

ele1.addEventListener('click ',函数(e){

e .stopperopagation();

//e . PreventDefault();

警报('点击孩子-一)

窗户。位置。href=' child-one '

},false)

ele2.addEventListener('click ',函数(e){

e .stopperopagation();

警报(“点击孩子-二”)

//窗口。位置。href=' child-two '

},false)

ele3.addEventListener('click ',函数(e){

警报('点击孩子-三)

窗户。位置。href=' child-3 '

},false)

父亲。添加事件侦听器('点击',函数(e){

警报("点击父亲")

window.location.href='父亲'

},false)

/script

/body

/html

本文转载自中文网

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航