Question

我想提供一个能够监听所有按钮点击事件的功能。

Web开发人员可能会使用不同类型的按钮..

<button></button>

或

<input type="button"></input>

或

<div class="button"></div>

等

有没有办法为所有这些不同类型的按钮添加公共事件处理程序？我想避免为每种创建按钮的方法手动编写事件处理程序。

修改你们中的许多人已经发布了一个很好的创建公共类的解决方案但不幸的是我不是创建按钮的人我提供了一个功能，应用程序/网站开发人员将调用该功能，我将收集所有类型的按钮点击事件并发送它们到服务器。

Answer 1

一种可能的方法是向所有common class添加elements：

 <buttonclass="btn"></button>
   <input type="button" class="btn"></input>
   <div class="button btn"></div>

然后在该课程的帮助下聆听这些元素：

$('.btn').on('click', function(){
 //Your code
})

Answer 2

$(':button, .button').on('click', function() {
    // Event handler code
});

我建议您应该将公共类用于所有类型的按钮并使用类添加事件：

<button class="myButton"></button>
<input type="button" class="myButton"></input>
<div class="button"></div>


$('.myButton').on('click', function() {
    // Event handler code
});

Answer 3

如果您创建了点击事件处理程序，例如：

$('.btn-click').click(function() {
    alert('Hello World');
});

然后，只需向其定义btn-click类，即可将此事件添加到多个不同的标记中。

<button class="btn-click"></button>

<input type="button" class="btn-click"></input>

<div class="button btn-click"></div>

工作JS小提琴：http://jsfiddle.net/VDesign/gvjLLf9L/

所有类型按钮的事件处理程序

3 个答案: