jQuery - 用于获取特定类型的事件目标或父级的事件扩展

Question

使用像Font Awesome这样的字形库，按钮通常最终看起来像这样：

<button>
    <span class="fa fa-stack-overflow fa-lg"></span> Click me
</button>

在处理按钮事件时，目标可以是范围或按钮本身，具体取决于用户单击的位置，因此我通常会得到如下所示的内容：

$('button').on('click', function($event) {
    var $target = $($event.target);
    var $button = $target.is('button') ? $target : $target.closest('button');
    // useful stuff goes here
}

是否可以扩展 jQuery 事件对象以添加封装此功能的方法，以便可以这样调用它？

var $button = $event.getSpecificTarget('button');

我创建了一个JSFiddle来演示这个问题。

它可以使用普通的jQuery插件来完成，但如果可以直接从事件对象访问它，而不是通过这样的插件，它会感觉更干净：

var $button = $.getSpecificTarget($event, 'button');

Answer 1

您可以将事件绑定到文档，而不是现在正在执行的操作。

$(function () {
  $(document).on('click', 'button', function() {
    var button = $(this);
    $('#result').append(button.text() + '<br>');
  });
});

请检查此JSFiddle。
当您单击按钮本身或范围时，您将看到button的文本附加到div。关键是使用 $(this) .
实际上，您可以保留现有代码并使用$(this)来获取按钮。