自己尝试着写了一个计算器,span 为 p的子元素,给p绑定了click事件,但点击span时浏览器报错,无法实现预期效果。
html:
0
AC
+/-
%
/
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时无法触发,p绑定事件。
PS:小白不想用JQ,谢谢!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
不应该用
e.target,而应该使用e.currentTarget,因为你是通过冒泡上来的,而不是得到目标点击元素