通过id获取dom元素:[DOM]获取元素:根据ID、标签名、HTML5新增的方法、特殊元素获取
目录[DOM]获取元素:根据ID、标签名、HTML5新增的方法、特殊元素获取 1.根据 ID 获取[.getElementById( )] 2.根据标签名获取[.getElementsByTagNam
顺晟科技
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
本文转载自中文网
19
2022-10
19
2022-10
25
2022-09
16
2022-09
15
2022-09
15
2022-09