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

Question

我有一个带有className="box-container"的div，它包含四个都有className="box"的div。包含的四个div具有唯一的ID，其中的文本和定义其用途的图标。

我有一个“单击”事件侦听器，该事件侦听器根据用户单击的框触发一个功能，我使用e.target.id来获取所选框的ID。

问题是，如果用户按下框内的文本或图标，那么我将无法获得正确执行该功能所需的ID。他们只能在框中的空白处选择适当的功能，这并不理想。

我希望用户选择框内的任何位置，并使用框ID执行该功能。

• 我可以更改框div中信息的结构方式，但这将意味着重新样式化（耗时）
• 或具有if语句检查e.target.parentElement.id

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

正确的输出：单击一个框后，将添加一个div，并且在下拉列表中选择一个项目时，“资源元素详细信息将显示（红色圆圈）

预期输出：

问题输出：在框中单击文本或图标后，将显示下拉列表，但选择一个项目不会产生任何结果。

这是代码。值得一看的 javascript函数称为addClass（e），我刚刚添加了所有代码，因为它们都已连接。

var box_container = document.getElementById("box-container");
var quote_body = document.getElementById("quote-body");
box_container.addEventListener("click", showPanel);
quote_body.addEventListener("change", calculateCost);

var f_pos = 0; var a_pos = 0; var t_pos = 0; var s_pos = 0; var g_total = 0;

function showPanel(e) {
    if(e.target.id === "box-container") {}
    else {
        addClass(e);
        document.getElementById("quote-body").style.display = "inline";
        document.getElementById("gt-div").style.display = "inline";
    }
}

function createLi(e) {
    //this function creates the list element (li)

    var li_element = document.createElement("li");

    var r_num = document.createElement("input");
    r_num.setAttribute("type", "number");
    r_num.setAttribute("max", "20");
    r_num.setAttribute("min", "1");
    r_num.id = "resorce-amount";

    var r_label1 = document.createElement("label");
    r_label1.textContent =" " + e.target.value + " for ";
    r_label1.id = "chosen-lbl";

    var r_duration = document.createElement("input");
    r_duration.setAttribute("type", "number");
    r_duration.setAttribute("max", "30");
    r_duration.setAttribute("min", "1");
    r_duration.id = "resource-duration";

    var r_type = document.createElement("select");
    r_type.id = "time-type";
    r_type.appendChild(new Option("---select---", "none"));
    r_type.appendChild(new Option("hours", "hours"));
    r_type.appendChild(new Option("days", "days"));
    r_type.appendChild(new Option("weeks", "weeks"));
    r_type.appendChild(new Option("months", "months"));

    var r_label2 = document.createElement("label");
    r_label2.id = "country-lbl";
    r_label2.textContent = " from ";

    var r_country = document.createElement("select");
    r_country.id = "country-lbl";
    r_country.appendChild(new Option("-----select-----", "none"));
    r_country.appendChild(new Option("South Africa", "South Africa"));
    r_country.appendChild(new Option("Israel", "Israel"));
    r_country.appendChild(new Option("China", "China"));

    var r_remove = document.createElement("button");
    r_remove.className = "remove-btn";
    r_remove.textContent = "X";
    r_remove.addEventListener("click", removeResource);

    //console.log("creat li function: " + e.target.id);

    //invisible divs for cost estimates
    var num      = document.createElement("label"); num.id      = "r-num";      //num.style.visibility      = "hidden";
    var duration = document.createElement("label"); duration.id = "r-duration"; //duration.style.visibility = "hidden";
    var type     = document.createElement("label"); type.id     = "r-type";     //type.style.visibility     = "hidden";
    var rate     = document.createElement("label"); rate.id     = "r-rate";     //rate.style.visibility     = "hidden";
    var estimate = document.createElement("label"); estimate.id = "r-estimate"; //estimate.style.visibility = "hidden";

    var r_position = document.createElement("label"); r_position.id = "r-position"; r_position.style.visibility = "hidden";

    //e.target.id being the id of the box
    if(e.target.id === "field-dropdown")
    {   
        r_position.value = f_pos;
        r_remove.id = "remove-field";
        estimate.className = "field-estimate";
        estimate.id = "field-estimate";
        li_element.id = "field-element-" + f_pos;
        li_element.className = "li-element-field";
        f_pos++;
    }
    if(e.target.id === "admin-dropdown")
    { 
        r_position.value = a_pos;
        estimate.className = "admin-estimate";
        estimate.id = "admin-estimate";
        r_remove.id = "remove-admin";   
        li_element.id = "admin-element-" + a_pos;   
        li_element.className = "li-element-admin";
        a_pos++;
    }
    if(e.target.id === "tech-dropdown")
    { 
        r_position.value = t_pos;
        estimate.className = "tech-estimate";
        estimate.id = "tech-estimate";
        r_remove.id = "remove-tech";
        li_element.id = "tech-element-" + t_pos;
        li_element.className = "li-element-tech";
        t_pos++;
    }
    if(e.target.id === "student-dropdown")
    {
        r_position.value = s_pos;
        estimate.className = "student-estimate";
        estimate.id = "student-estimate";
        r_remove.id = "remove-student";
        li_element.id = "student-element-" + s_pos;
        li_element.className = "li-element-student";
        s_pos++;
    }

    li_element.appendChild(r_num);
    li_element.appendChild(r_label1);
    li_element.appendChild(r_duration);
    li_element.appendChild(r_type);
    li_element.appendChild(r_label2);
    li_element.appendChild(r_country);
    li_element.appendChild(r_remove);

    li_element.appendChild(num);
    li_element.appendChild(duration);
    li_element.appendChild(rate);
    li_element.appendChild(estimate);
    li_element.appendChild(r_position);

    li_element.appendChild(document.createElement("br"));

    return li_element;
}

function addResource(e) {
    e.preventDefault();

    if( e.target.id === "field-dropdown") //where did the request come from (which element triggered the request)
    {
        document.getElementById("field-list").appendChild(createLi(e));
    }
    if( e.target.id === "admin-dropdown")
    {
        document.getElementById("admin-list").appendChild(createLi(e));
    }
    if( e.target.id === "tech-dropdown")
    {
        document.getElementById("tech-list").appendChild(createLi(e));
    }
    if( e.target.id === "student-dropdown")
    {
        document.getElementById("student-list").appendChild(createLi(e));
    }
}

function addClass(e) {
    if( document.getElementsByClassName("quote-container").length <= 4 ) {
        var container = document.createElement("div");
        var form      = document.createElement("form");
        var ul        = document.createElement("ul");

        var temp_dd = document.createElement("select");
        var lbl     = document.createElement("label");
        var div     = document.createElement("div");  
        var div_lbl = document.createElement("div");

        var dropdown;

        container.style.gridTemplateColumns = "10% 90%";
        container.style.display =  "grid";
        
        //e.target.id being the id of the box the user clicked on
        if( e.target.id === "fieldBox" )   { 
            container.className = "admin-container";
            temp_dd.id = "field-dropdown";
            container.id = "f-body";
            ul.id = "field-list";
            lbl.id = "f-estimate";
        }
        if( e.target.id === "adminBox" )   { 
            container.className = "admin-container";
            temp_dd.id = "admin-dropdown";
            container.id = "a-body";
            ul.id = "admin-list";
            lbl.id = "a-estimate";
        }
        if( e.target.id === "techBox" )    { 
            container.className = "tech-container";
            temp_dd.id = "tech-dropdown";
            container.id = "t-body";
            ul.id = "tech-list";
            lbl.id = "t-estimate";
        }
        if( e.target.id === "studentBox" ) { 
            container.className = "student-container";
            temp_dd.id = "student-dropdown";
            container.id = "s-body";
            ul.id = "student-list";
            lbl.id = "s-estimate";
        }

        //will be set from php data, but for now this...
        temp_dd.appendChild(new Option("-----select-----", "none"));
        temp_dd.appendChild(new Option("Secratary", "Secratary"));
        temp_dd.appendChild(new Option("Data capturer", "Data capturer"));
        temp_dd.appendChild(new Option("Clerk", "Clerk"));

        dropdown = temp_dd;
        dropdown.addEventListener("change", addResource);

        container.style.gridTemplateColumns = "10% 90%";
        container.className = "quote-container";
        container.style.display = "grid";

        form.id = "skill-form";

        //ul.appendChild(createLi(e));

        form.appendChild(dropdown);
        container.appendChild(form);
        container.appendChild(ul);
        container.appendChild(div_lbl);
        container.appendChild(lbl);
        container.appendChild(div);

        document.getElementById("quote-body").appendChild(container);
    }
    else{
        /*var g_total = document.createElement("label");
        g_total.id = "grand-total";
        g_total.innerText = "made";
        document.getElementById("quote-body").appendChild(g_total);
        console.log("over the limit");*/
    }
}

function removeResource(e) {
    if(e.target.classList.contains("remove-btn")) {
        if(confirm("Are you sure?")) {
            var r_remove = e.target.parentElement;
            //console.log("delete function id: " + e.target.id);
            if (e.target.id === "remove-field")   { document.getElementById("field-list").removeChild(r_remove); f_pos--;}
            if (e.target.id === "remove-admin")   { document.getElementById("admin-list").removeChild(r_remove); a_pos--;}
            if (e.target.id === "remove-tech")    { document.getElementById("tech-list").removeChild(r_remove); t_pos--;}
            if (e.target.id === "remove-student") { document.getElementById("student-list").removeChild(r_remove); s_pos--;}
        }
    }
    //calculateCost(e);
}

function calculateCost(e) {
    var f_arr; var a_arr; var t_arr; var s_arr;
    //e.target.parentElement.children.item(9).value = "2";

    if(e.target.id === "resorce-amount")
    {
        document.getElementById("r-num").value = e.target.value;
    }
    if(e.target.id === "resource-duration")
    {
        document.getElementById("r-duration").value = e.target.value;
    }
    if(e.target.id === "time-type")
    {
        if(e.target.value === "hours")  { e.target.parentElement.children.item(9).value = "2";}
        if(e.target.value === "days")   { e.target.parentElement.children.item(9).value = "16";}
        if(e.target.value === "weeks")  { e.target.parentElement.children.item(9).value = "80";}
        if(e.target.value === "months") { e.target.parentElement.children.item(9).value = "320";}

        if(e.target.parentElement.className === "li-element-field")   {type = e.target.value;}
        if(e.target.parentElement.className === "li-element-admin")   {type_a = e.target.value}
        if(e.target.parentElement.className === "li-element-tech")    {type_t = e.target.value}
        if(e.target.parentElement.className === "li-element-student") {type_s = e.target.value}
    }

    if(e.target.parentElement.className === "li-element-field") {
        //geting calculation variables from the list element's children via eve
        var num = e.target.parentElement.children.item(0).value;
        var dur = e.target.parentElement.children.item(2).value;
        var rte = e.target.parentElement.children.item(9).value;   
        var est = 0;
        if(!isNaN(num*dur*rte))
            est = num*dur*rte;

        e.target.parentElement.children.item(10).value = est;

        //gets all active field estimates as HTML collection
        f_arr = document.getElementsByClassName("field-estimate");

        //gets position of the element from id
        var pos = parseInt(e.target.parentElement.id.slice(14,15));
        var total = 0;

        for(var i = 0 ; i<f_arr.length;i++)
        {//stores calculated element estimates in a HTML collection based on element pos then sums the total estimates in the collection
            f_arr[pos].value = est;
            total += f_arr[i].value;
            g_total += total;
        }
        if(!isNaN(total))
            document.getElementById("f-estimate").innerText = "Field resource estimate: R " + total;
    }
    if(e.target.parentElement.className === "li-element-admin") {
        //geting calculation variables from the list element's children via event trigger
        var num = e.target.parentElement.children.item(0).value;
        var dur = e.target.parentElement.children.item(2).value;
        var rte = e.target.parentElement.children.item(9).value;   
        var est = 0;
        if(!isNaN(num*dur*rte))
            est = num*dur*rte;

        e.target.parentElement.children.item(10).value = total;

        //gets all active field estimates as HTML collection
        a_arr = document.getElementsByClassName("admin-estimate");

        //gets position of the element from id
        var pos = parseInt(e.target.parentElement.id.slice(14,15));
        var total = 0;

        for(var i = 0 ; i<a_arr.length;i++)
        {//stores calculated element estimates in a HTML collection based on element pos
            a_arr[pos].value = est;
            total += a_arr[i].value;
            g_total += total;
        }
        if(!isNaN(total))
            document.getElementById("a-estimate").innerText = "Admin resource estimate: R " + total;
    }
    if(e.target.parentElement.className === "li-element-tech") {
        //geting calculation variables from the list element's children via event trigger
        var num = e.target.parentElement.children.item(0).value;
        var dur = e.target.parentElement.children.item(2).value;
        var rte = e.target.parentElement.children.item(9).value;   
        var est = 0;
        if(!isNaN(num*dur*rte))
            est = num*dur*rte;

        e.target.parentElement.children.item(10).value = total;

        //gets all active field estimates as HTML collection
        t_arr = document.getElementsByClassName("tech-estimate");

        //gets position of the element from id
        var pos = parseInt(e.target.parentElement.id.slice(13,14));
        var total = 0;

        for(var i = 0 ; i<t_arr.length;i++)
        {//stores calculated element estimates in a HTML collection based on element pos
            t_arr[pos].value = est;
            total += t_arr[i].value;
            g_total += total;
        }
        if(!isNaN(total))
            document.getElementById("t-estimate").innerText = "Tech resource estimate: R " + total;
    }
    if(e.target.parentElement.className === "li-element-student") {
        //geting calculation variables from the list element's children via event trigger
        var num = e.target.parentElement.children.item(0).value;    
        var dur = e.target.parentElement.children.item(2).value;
        var rte = e.target.parentElement.children.item(9).value;   
        var est = 0;
        if(!isNaN(num*dur*rte))
            est = num*dur*rte;

        e.target.parentElement.children.item(10).value = total;

        //gets all specified estimates as HTML collection
        s_arr = document.getElementsByClassName("student-estimate");

        //gets position of the element from id
        var pos = parseInt(e.target.parentElement.id.slice(16,17));
        var total = 0;

        for(var i = 0 ; i<s_arr.length;i++)
        {//stores calculated element estimates in a HTML collection based on element pos
            s_arr[pos].value = est;
            total += s_arr[i].value;
            g_total += total;
        }
        if(!isNaN(total))
            document.getElementById("s-estimate").innerText = "Student resource estimate: R " + total;
    }
    document.getElementById("g-total").innerText = "Grand total: R " + g_total;
}

.grid-container {
    display: grid;
    height:300px;
    grid-template-columns:1fr 1fr 1fr 1fr 1fr ;
    grid-template-rows: 20% 1fr 1fr;
    grid-template-areas: 
        'title_ title_ title_ title_ title_'
        'bcontainer bcontainer bcontainer bcontainer bcontainer'
        'qcontainer_ qcontainer_ qcontainer_ qcontainer_ qcontainer_';
}
.heading-container {
    grid-area: title_;
    color: grey;
    text-align: center;
    background-color: lightcyan;
}
.box-container {
    grid-area: bcontainer;
    width: 100%;
    padding: 10px;
    display: flex;
    text-align: center;
    justify-content: center;
    background-color: lightcyan;
}
.quote-container {
    grid-area: qcontainer_;
    padding: 10px;
    background-color: lightcyan;
}

/*setting size of a box to be contained*/
.box {
    width: 260px;
    height: 160px;
    display: flex;
    background-color: white;
    margin: 0px 10px;
    transition: 1s;
    border-radius: 10px;
    border: 1.5px solid #bdbdbd;
}

.box:hover {
    transform: scale(1.1);
    text-decoration: none;
}

.content-box {
    margin-top: 10px;
    margin-left: 5px;
    border-left: 2px solid #d8d8d8;
    border-right: none;
    border-top: none;
    border-bottom-color: none;
}

.fa-user-cog, .fa-user-edit, .fa-user-tie,
.fa-user-graduate {
    color: #0e9aa7;
    margin-top: 50px;
    margin-left: 5px;
}

.sub-heading {
    color: black;
    margin-top: 1px;
}

.sub-heading-2 {
    color: black;
    margin-top: 50px;
    margin-left: 60px;
}

.skill-level {
    color: grey;
    margin-top: -10px;
    margin-left: 2px;
}

.skill-level-2 {
    color: grey;
    margin-top: -10px;
    margin-left: 30px;
}

.examples {
    font-size: x-small;
    color: grey;
    margin-top: 15px;
    margin-left: 2px;
}

/*Instruction Phrase*/
.choose-instruction {
    text-align: center;
    color: grey;
    margin-top: 10px;
}

body {/*of entire page*/
    background-color: #f1f1f1;
}

input {
    font-size: 13.5px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Hallabak-Dashboard</title>
    <link rel="shortcut icon" href="Images/cropped-Signage-Logo-32.png">
    <link rel="stylesheet" href="Navigation Menu stylesheet.css">
</head>
<body>
    <div class="grid-container" id="grid-container">
        <!-- cntains pgae heading -->
        <div class="heading-container">
            <h1>Estimated team quote</h1>
            <h4>choose skill level</h4>
        </div>
        <!-- contains 4 box elements -->
        <div class="box-container" id="box-container">
            <!-- field box -->
            <div class="box" id="fieldBox">
                <div class="icon"><i class="fas fa-user-cog fa-4x"></i></div>
                <div class="content-box">
                    <div class="sub-heading"><h6>Field team</h6></div>
                    <div class="skill-level">entry-level</div>
                    <div class="examples">Data collectors,</br>Sales person,</br>Waiters...etc</div>
                </div>
            </div>
            <!-- admin box -->
            <div class="box" id="adminBox">
                <div class="icon"><i class="fas fa-user-edit fa-4x"></i></div>
                <div class="content-box">
                    <div class="sub-heading"><h6>Admin & Support</h6></div>
                    <div class="skill-level">mid-level</div>
                    <div class="examples">Data capturers,</br>Social Media coordinator,</br> Desk operator ...etc</div>
                </div>
            </div>
            <!-- tech box -->
            <div class="box" id="techBox">
                <div class="icon"><i class="fas fa-user-tie fa-4x"></i></div>
                <div class="content-box">
                    <div class="sub-heading"><h6>Tech & Specialising</h6></div>
                    <div class="skill-level">high-level</div>
                    <div class="examples">App/Web developers,</br> Accountant,</br>Market Analyst...etc</div>
                </div>
            </div>
            <!-- student box -->
            <div class="box" id="studentBox">

                <div class="icon"><i class="fas fa-user-graduate fa-4x"></i></div>
                <div class="content-box">
                    <div class="sub-heading-2"><h6>Students</h6></div>
                    <div class="skill-level-2">University/College</div>
                </div>
            </div>
        </div>
        <!-- resource selector -->
        <div class="quote-container" id="quote-body" style="display:none">
        </div>
        <!-- grand total-->
        <div class="" id="gt-div" style="display:none">
            <label id="g-total"></label>
        </div>
    </div>
    <script language="javascript" type="text/javascript" src="teamquoteJS.js"></script>
</body>
</html>