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)来获取按钮。