Javascript 单击带有文本的div上的任意位置，仍然会触发事件

我有一个带有

className=“box container”

的div，它包含四个div，它们都有

className=“box”

。包含的四个div具有唯一的id、其中的文本和定义其用途的图标

我有一个“点击”事件监听器，它根据用户点击的框触发一个函数，我使用

e.target.id

获取所选框的id

问题是，如果用户按下框内的文本或图标，则我无法获得正确执行函数所需的id。他们只能在框中的空格上选择函数的正确执行，这是不理想的。 我希望用户选择框内的任何位置，并使用框id执行函数。

• 我可以更改box div中信息的结构，但这将意味着重新排序（耗时）
• 或者使用检查e.target.parentElement.id的if语句

但我觉得可能还有另一种更有效的方法

正确的输出：点击一个框后，添加一个div，当下拉列表中的一个项目被选中时，“资源元素详细信息”出现（红色圆圈）

预期产出：

问题输出：单击框中的文本或图标后，会出现下拉列表，但选择项目不会产生任何结果

下面是代码。值得一看的javascript函数叫做addClass（e），我刚刚添加了所有代码，因为它都是连接的

var-box\u-container=document.getElementById（“box-container”）；
var quote_body=document.getElementById（“quote body”）；
box_container.addEventListener（“单击”，显示面板）；
引用正文中添加的清单（“变更”，计算成本）；
var f_pos=0；var a_pos=0；var t_pos=0；var s_pos=0；var g_total=0；
功能显示面板（e）{
如果（e.target.id==“盒子容器”）{}
否则{
高级船员（e）；
document.getElementById（“报价正文”）.style.display=“内联”；
document.getElementById（“gt div”）.style.display=“inline”；
}
}
函数createLi（e）{
//此函数用于创建列表元素（li）
var li_element=document.createElement（“li”）；
var r_num=document.createElement（“输入”）；
r_num.setAttribute（“类型”、“编号”）；
设置属性（“最大”、“20”）；
r_num.setAttribute（“最小”、“1”）；
r_num.id=“资源金额”；
var r_label1=document.createElement（“标签”）；
r_label1.textContent=”“+e.target.value+“for”；
r_label1.id=“选择的lbl”；
var r_duration=document.createElement（“输入”）；
r_duration.setAttribute（“类型”、“编号”）；
r_duration.setAttribute（“最大”、“30”）；
r_duration.setAttribute（“min”，“1”）；
r_duration.id=“资源持续时间”；
var r_type=document.createElement（“选择”）；
r_type.id=“时间类型”；
r_type.appendChild（新选项（“--select--”和“none”）；
r_type.appendChild（新选项（“小时”、“小时”））；
r_type.appendChild（新选项（“天”、“天”））；
r_type.appendChild（新选项（“周”、“周”）；
r_type.appendChild（新选项（“月”、“月”）；
var r_label2=document.createElement（“标签”）；
r_label2.id=“国家lbl”；
r_label2.textContent=“from”；
var r_country=document.createElement（“选择”）；
r_country.id=“国家lbl”；
r_country.appendChild（新选项（“----选择------”，“无”）；
r_国家/地区（新选项（“南非”、“南非”））；
r_国家/地区（新选项（“以色列”、“以色列”））；
r_国家/地区（新选项（“中国”、“中国”））；
var r_remove=document.createElement（“按钮”）；
r_remove.className=“remove btn”；
r_remove.textContent=“X”；
r_remove.addEventListener（“单击”，removeResource）；
//console.log（“创建li函数：+e.target.id”）；
//成本估算的无形div
var num=document.createElement（“标签”）；num.id=“r-num”；//num.style.visibility=“hidden”；
var duration=document.createElement（“标签”）；duration.id=“r-duration”；//duration.style.visibility=“hidden”；
var type=document.createElement（“标签”）；type.id=“r-type”；//type.style.visibility=“hidden”；
var rate=document.createElement（“标签”）；rate.id=“r-rate”；//rate.style.visibility=“hidden”；
var-estimate=document.createElement（“标签”）；estimate.id=“r-estimate”；//estimate.style.visibility=“hidden”；
var r_position=document.createElement（“标签”）；r_position.id=“r-position”；r_position.style.visibility=“hidden”；
//e、 target.id是框的id
如果（e.target.id==“字段下拉列表”）
{   
r_position.value=f_pos；
r_remove.id=“删除字段”；
estimate.className=“字段估计”；
estimate.id=“字段估计”；
li_element.id=“字段元素-”+f_pos；
li_element.className=“li element字段”；
f_pos++；
}
如果（e.target.id==“管理员下拉列表”）
{ 
r_position.value=a_pos；
estimate.className=“管理估算”；
estimate.id=“管理估算”；
r_remove.id=“删除管理员”；
li_element.id=“管理元素-”+a_pos；
li_element.className=“li element admin”；
a_pos++；
}
如果（e.target.id==“技术下拉列表”）
{ 
r_position.value=t_pos；
estimate.className=“技术估算”；
estimate.id=“技术估算”；
r_remove.id=“移除技术”；
li_element.id=“技术元素-”+t_pos；
li_element.className=“li element tech”；
t_pos++；
}
如果（e.target.id==“学生下拉列表”）
{
r_position.value=s_pos；
estimate.className=“学生评估”；
estimate.id=“学生评估”；
r_remove.id=“删除学生”；
li_element.id=“学生元素-”+s_pos；
li_元素.className