如何在使用javascript添加addEventListener之后正确地获取单击元素？

Question

我正在尝试使用JavaScript创建一个类似计算器的屏幕。我使用以下HTML模板创建了数字垫按钮

<button type="button" class="calulator_button" data-default-value="{NUMBER_VALUE}">
    <div class="card-body pl-0 pr-0">
        <p class="card-text display-4">{NUMBER_VALUE}</p>
    </div>
</button>

当单击具有类calulator_button的按钮时，我希望将data-default-value添加到显示屏幕中。

我创建了以下JS代码，它侦听button.calulator_button选择器上的单击事件并触发appendNumberToCalulator函数。

目前，我正在使用event.target查找单击元素以确定data-default-value属性。

问题

根据用户单击按钮的位置，event.target可能返回不同的结果。

例如，如果用户直接单击按钮内的数字，event.target将返回按钮内的<p>1</p>元素。如果用户单击的距离略高于数字，则返回包装<div></div>元素的<p></p>元素。最后，如果用户单击按钮的边缘“就在<div></div>元素之外”，则返回实际按钮。

问题

如何确保返回按钮元素，而不管用户单击何处？

以下是完整的片段

​

var calulatorButtons = document.querySelectorAll('button.calulator_button');
for (var i = 0; i < calulatorButtons.length; i++) {
    calulatorButtons[i].addEventListener('click', appendNumberToCalulator);
}

function getCalculatorDisplayElement() {
    return document.getElementById('Calculator_Total');
}

function appendNumberToCalulator(event) {

    var valueToAppend = event.target.getAttribute('data-default-value');
    var totalDisplay = getCalculatorDisplayElement();

    if (valueToAppend == '.' && totalDisplay.value.indexOf('.') > -1) {

        return;
    }

    totalDisplay.value += valueToAppend;
}


/* Handle Clear Screen */
document.getElementById('Calulator_Clear').addEventListener('click', function (_event) {
    getCalculatorDisplayElement().value = '';
});


/* Handle Clear Backspace */
document.getElementById('Calulator_Backspace').addEventListener('click', function (_event) {
    var value = getCalculatorDisplayElement().value;
    if (!value) {
        return;
    }
    getCalculatorDisplayElement().value = value.slice(0, -1);
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
                
    <div class="form-row align-items-center">
        <div class="col-8">
            <label class="sr-only" for="Calculator_Total"></label>
            
            <input class="form-control" data-val="true" id="Calculator_Total" name="Calculator_Total" type="text" value="">
        </div>

        <div class="col-sm-2">
            <button type="button" class="btn btn-primary w-100" id="Calulator_Backspace">«</button>
        </div>

        <div class="col-sm-2">
            <button type="button" class="btn btn-primary w-100" id="Calulator_Clear">C</button>
        </div>
    </div>

    <div class="card-deck mr-0 ml-0">
        

        <button type="button" data-action-type="Calculator" class="card text-white bg-secondary text-center calulator_button" style="min-width: 32%; max-width: 32.5%" data-id="" data-default-value="1">
            <div class="card-body pl-0 pr-0">
                <p class="card-text display-4">1</p>
            </div>
        </button>


        <button type="button" data-action-type="Calculator" class="card text-white bg-secondary text-center calulator_button" style="min-width: 32%; max-width: 32.5%" data-id="" data-default-value="2">
            <div class="card-body pl-0 pr-0">
                <p class="card-text display-4">2</p>
            </div>
        </button>


        <button type="button" data-action-type="Calculator" class="card text-white bg-secondary text-center calulator_button" style="min-width: 32%; max-width: 32.5%" data-id="" data-default-value="3">
            <div class="card-body pl-0 pr-0">
                <p class="card-text display-4">3</p>
            </div>
        </button>


        <button type="button" data-action-type="Calculator" class="card text-white bg-secondary text-center calulator_button" style="min-width: 32%; max-width: 32.5%" data-id="" data-default-value="4">
            <div class="card-body pl-0 pr-0">
                <p class="card-text display-4">4</p>
            </div>
        </button>


        <button type="button" data-action-type="Calculator" class="card text-white bg-secondary text-center calulator_button" style="min-width: 32%; max-width: 32.5%" data-id="" data-default-value="5">
            <div class="card-body pl-0 pr-0">
                <p class="card-text display-4">5</p>
            </div>
        </button>


        <button type="button" data-action-type="Calculator" class="card text-white bg-secondary text-center calulator_button" style="min-width: 32%; max-width: 32.5%" data-id="" data-default-value="6">
            <div class="card-body pl-0 pr-0" >
                <p class="card-text display-4">6</p>
            </div>
        </button>


        <button type="button" data-action-type="Calculator" class="card text-white bg-secondary text-center calulator_button" style="min-width: 32%; max-width: 32.5%" data-id="" data-default-value="7">
            <div class="card-body pl-0 pr-0">
                <p class="card-text display-4">7</p>
            </div>
        </button>


        <button type="button" data-action-type="Calculator" class="card text-white bg-secondary text-center calulator_button" style="min-width: 32%; max-width: 32.5%" data-id="" data-default-value="8">
            <div class="card-body pl-0 pr-0">
                <p class="card-text display-4">8</p>
            </div>
        </button>


        <button type="button" data-action-type="Calculator" class="card text-white bg-secondary text-center calulator_button" style="min-width: 32%; max-width: 32.5%" data-id="" data-default-value="9">
            <div class="card-body pl-0 pr-0">
                <p class="card-text display-4">9</p>
            </div>
        </button>


        <button type="button" data-action-type="Calculator" class="card text-white bg-secondary text-center calulator_button" style="min-width: 32%; max-width: 32.5%" data-id="" data-default-value="00">
            <div class="card-body pl-0 pr-0">
                <p class="card-text display-4">00</p>
            </div>
        </button>


        <button type="button" data-action-type="Calculator" class="card text-white bg-secondary text-center calulator_button" style="min-width: 32%; max-width: 32.5%" data-id="" data-default-value="0">
            <div class="card-body pl-0 pr-0">
                <p class="card-text display-4">0</p>
            </div>
        </button>


        <button type="button" data-action-type="Calculator" class="card text-white bg-secondary text-center calulator_button" style="min-width: 32%; max-width: 32.5%" data-id="" data-default-value=".">
            <div class="card-body pl-0 pr-0">
                <p class="card-text display-4">.</p>
            </div>
        </button>

    </div>

​

Answer 1

您需要使用currentTarget属性，而不是target。链接MDN文章的介绍解释了不同之处，以及为什么在本例中您希望currentTarget比我更好。