Javascript EventListener单击不处理内部的H标记

我有一个简单的模式，它在点击按钮时显示，里面有一个页面，取决于点击哪个按钮， uno代表第1页，dos代表第2页，tres代表第3页

整个框是一个按钮，我有h3在里面（它的标题，该按钮），但当我点击绿色区域，这是h3，我的网页不支持了

我知道问题是，当它点击h3时，它的目标是h3，而h3中有ni ID

当我点击h3时，有人能帮我让它充当div吗

文件
.myBtn{
宽度：100px；
高度：100px；
背景色：浅绿色；
利润率：10px；
文本对齐：居中；
}
.myBtn h3{
背景颜色：绿色；
线高：2；
光标：指针；
}
.myBtn:悬停{
背景颜色：海蓝宝石；；
}
.基站{
浮动：左；
}
.莫代尔{
显示：无；
背景色：浅绿色；
浮动：对；
宽度：400px；
高度：600px；
}
.第1页{
位置：绝对位置；
显示：无；
背景颜色：白肋木；
利润率：20px；
宽度：300px；
高度：150像素；
}
.p1{
边框：2倍纯红；
}
.p2{
边框：2件纯蓝；
}
.p3{
边框：2倍纯绿；
}
单击按钮以显示模态

联合国组织
磁盘操作系统
特雷斯
情态动词
第1页
第2页
第3页
var btn=document.querySelectorAll（'.myBtn'）；
var getModal=document.querySelector（'.modal'）；
var getPages=document.querySelectorAll（'.page1'）；
//console.log（getPages）；
for（设i=0；i{
hideModal（）；
getId（）；
displayPage（）}）；
}
函数hideModal（）{
getModal.style.display=“块”；
}
函数getId（）{
//日志（event.target.id）；
}
函数hideall（）{
对于（设i=0；i您可以将
指针事件：none
添加到
h3
元素中，以便任何单击都会转到其后面包含的父级
div
，从而获得正确的id以显示正确的页面：

.myBtn h3 {
  background-color: green;
  line-height: 2;
  cursor: pointer;
  pointer-events: none;
}

见下例：


var btn=document.querySelectorAll（'.myBtn'）；
var getModal=document.querySelector（'.modal'）；
var getPages=document.querySelectorAll（'.page1'）；
//console.log（getPages）；
for（设i=0；i{
hideModal（）；
getId（）；
显示页面（）
});
}
函数hideModal（）{
getModal.style.display=“块”；
}
函数getId（）{
//日志（event.target.id）；
}
函数hideall（）{
for（设i=0；i

.myBtn{
宽度：100px；
高度：100px；
背景色：浅绿色；
利润率：10px；
文本对齐：居中；
}
.myBtn h3{
背景颜色：绿色；
线高：2；
光标：指针；
指针事件：无；
}
.myBtn:悬停{
背景颜色：海蓝宝石；
;
}
.基站{
浮动：左；
}
.莫代尔{
显示：无；
背景色：浅绿色；
浮动：对；
宽度：400px；
高度：600px；
}
.第1页{
位置：绝对位置；
显示：无；
背景颜色：白肋木；
利润率：20px；
宽度：300px；
高度：150像素；
}
.p1{
边框：2倍纯红；
}
.p2{
边框：2件纯蓝；
}
.p3{
边框：2倍纯绿；
}
单击按钮以显示模态

联合国组织
磁盘操作系统
特雷斯
情态动词
第1页
第2页
第3页