使用像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');
答案 0 :(得分:1)
您可以将事件绑定到文档,而不是现在正在执行的操作。
$(function () {
$(document).on('click', 'button', function() {
var button = $(this);
$('#result').append(button.text() + '<br>');
});
});
请检查JSFiddle
当您单击按钮本身或跨度时,您会看到button
的文本附加到div
。关键是使用$(this)
实际上,您可以保留代码,并使用$(this)
来获取按钮。