javascript - 用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在这种情况下，比我做得更好。