Question

我正在使用计算器并在每个id上都有mousedown和mouseup功能。有没有办法清理它并有一个函数调用任何时候单击一个类元素，并能够获得在函数内被单击的id？

此处是指向myfiddle calculator

的链接

另外，我注意到当我将我的javascript直接放在JS框中时它没有工作，但是作为嵌入在html中的脚本它可以正常工作。有人能解释一下原因吗？

 <tr>
    <td class='noborder' colspan='1' rowspan='2'> </td>
    <td id='1' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>1</td>
    <td id='2' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>2</td>
    <td id='3' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>3</td>
    <td id='plus' class='buttons' colspan='4' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>+</td>
    <td class='noborder' colspan='1' rowspan='2'> </td>
  </tr>


<script>
function mouseDown(id) {
document.getElementById(id).style.backgroundColor = "gray";
}

function mouseUp(id) {
document.getElementById(id).style.backgroundColor = "white";
}
</script>

Answer 1

我意识到如何使用类在所有元素上添加mousedown和mouseup事件：

var elements = document.getElementsByClassName("buttons");
for (var i = 0; i < elements.length; i++) {
    elements[i].onmousedown = function() {
        mouseDown(this.id);
        mouseUp(this.id);
    }
}

我在w3schools.com上测试了它。

（另外，我不知道JS Box的意思。抱歉。）

Answer 2

删除脚本标记，并将其添加到您的css样式：

   .buttons:active {
    background-color: gray;
   }

对于计算，请使用以下内容：

<script>
var table = document.getElementsByTagName("table")[0]
table.addEventListener("click",clicked);

function clicked(el){
  if (el.hasClass("buttons")){
   //magic
}
}
</script>

Answer 3

可能是因为您的网页上存在ID冲突。出于这个原因，不建议使用类似“1”的ID;更好的是更具体。

实际上，无论如何都不需要通过其ID来查询元素。只需将元素传递给处理程序，就可以直接对元素进行操作。 E.g。

<td class='buttons' onmousedown="mouseDown(this)" onmouseup="mouseUp(this)" >1</td>

<script>
function mouseDown(element) {
  element.style.backgroundColor = "gray";
}

function mouseUp(element) {
  element.style.backgroundColor = "white";
}
</script>

编辑：正如@bgaury所提到的，CSS active伪类是这个用例的更好的选择。

如何将js函数分配给类并在单击时获取id

3 个答案: