html - javascript中子元素事件继承问题

问题描述

问 题

自己尝试着写了一个计算器，span 为 div的子元素，给div绑定了click事件，但点击span时浏览器报错，无法实现预期效果。

html：

<div class = "container col-sm-offset-5">

          <div class="row " id = "display-sec">
            <div class="col-sm-4" style="background-color:black">
              <span id = "distxt">0</span>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-1  calButton ">
              <span class="calValue" id="ac">AC</span>
            </div>
            <div class="col-sm-1 calButton " >
              <span class="calValue" id="negative">+/-</span>
            </div>
            <div class="col-sm-1 calButton " >
              <span class="calValue" id="percent">%</span>
            </div>
            <div class="col-sm-1 calButton  lastcol" >
              <span class="calValue" id="divide">/</span>
            </div>
        </div>

javascript click事件绑定：

var distxtval = document.getElementById("distxt");
function displayVal() {
    var calButtonArr = document.getElementsByClassName("calButton");
    for (var i = 0, len = calButtonArr.length; i < len; i++) {
        calButtonArr[i].addEventListener("click", function returnValue(e) {
            var disNow = e.target.getElementsByTagName("span")[0].innerHTML;
            //when input num display num rather than displaying "0"+num;
            if (distxtval.innerHTML === "0" && disNow !== "AC" && disNow !== '.') {
                distxtval.innerHTML = e.target.getElementsByTagName("span")[0].innerHTML;
            }
            //not the 1st time input value
            else {
                var regEx = /[+\-*/]/gi;
                var dotreg = /[.]/gi;
                //when press AC set the screen as 0;
                if (disNow === "AC") {
                    distxtval.innerHTML = 0;
                    return false;
                }
                //when press "=" calculator the answer;
                else if (disNow === "%") {
                    distxtval.innerHTML = (distxtval.innerHTML * 100).toFixed(2) + "%";
                }
                else if (disNow === "+/-") {
                    distxtval.innerHTML = 0 - distxtval.innerHTML;
                }
                else if (disNow === "=") {
                    distxtval.innerHTML = eval(distxtval.innerHTML);
                }
                //the part before the "||" is used to unqiue the symbol "+-*/" and the another part is to unique the dot;
                else if (regEx.test(disNow) && disNow === distxtval.innerHTML[distxtval.innerHTML.length - 1] || (dotreg.test(distxtval.innerHTML) && disNow === ".")) {
                    distxtval.innerHTML = distxt.innerHTML;
                }
                else if(disNow !== "=") {
                    distxtval.innerHTML = distxt.innerHTML + disNow;
                }
            }
        }, false);
    }
}

当点击span时无法触发,div绑定事件。
PS:小白不想用JQ，谢谢！

解决方案

不应该用e.target，而应该使用e.currentTarget，因为你是通过冒泡上来的，而不是得到目标点击元素

这篇关于html - javascript中子元素事件继承问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！