javascript - 使用 javascript 检测点击次数

Question

有谁知道一种方法来检测一系列图像输入按钮中的哪一个被点击，并相应地执行一些javascript？

例如，如果单击“关于”按钮，页面上的“关于”标题将变为蓝色。我可以单独执行此操作，但是否有循环或其他东西可以瘦身？提前致谢！

Answer 1

如果您的按钮共享一个类，您可以使用它document.querySelectorAll来选择所有按钮并Array.prototype.forEach.call进行迭代：

<button class="about-button" id="a">a</button>
<button class="about-button" id="b">b</button>
<button class="about-button" id="c">c</button>
<script>
    [].forEach.call(document.querySelectorAll('.about-button'), function(el) {
        el.addEventListener('click', imageButtonClickHandler);
    });

    function imageButtonClickHandler() {
        alert('button clicked: ' + this.id);
    }
</script>

Answer 2

这个问题并不完全清楚，但我会尝试根据一些假设来回答它。

如果您正在动态创建图像按钮，那么我会将一个 onclick 事件处理程序附加到正在添加的所有图像按钮，并将“this”作为参数传递给处理程序。这样点击处理程序可以查看传入的 DOM 元素。

<a onclick="imageClicked(this)"><img src="about.jpg" /></a> 

如果元素是在页面上声明的，而不是动态添加的，我会为每个图像按钮绑定 click 事件，如果它们不是那么多（正如@Joshua Brodie 指出的那样）。如果它们很多，我将有一个单击处理程序，并在“数据”属性中具有特定于图像按钮的数据。

<a class="imgbtn" data-buttonname="about"><img src="about.jpg" /></a>

$('.imagebtn').bind('click', function () {
  console.log($(this).data('buttonname')); // about
});

Answer 3

如果您使用的是 jQuery，则可以使用以下.on方法：

$("#about").on("click", function(event){
  $(this).css("background-color", "blue"); // Or RGB color, just like in the CSS
});

来源：http ://api.jquery.com/on/和http://api.jquery.com/css/