jQuery特定于单行中两个DOM元素的事件

Question

我试图为单个DOM中的两个元素执行相同的函数，但它们都需要不同的事件。

$("div.form-group").children("input,button").on("click blur",function(){
    console.log("GO!");
});

这是我最初的想法，但当我测试它时，它也在关注文本字段时执行！我只希望它在单击按钮或退出文本字段时执行。（就像下面一样，它实际上不起作用。）

$("div.form-group").children("input,button").on("button.click input.blur",function(){
    console.log("GO!");
});

有什么想法吗？还是我需要两份单独的声明？

Answer 1

您可以检查e.target.nodeName和e.type并相应地运行函数。正如您所看到的，只有当您点击按钮或移除输入焦点时，函数才会运行。

function go() {
  console.log("GO!");
}
$('input, button').on('click blur', function(e) {
  if(e.target.nodeName == 'INPUT' && e.type == 'blur') go();
  if(e.target.nodeName == 'BUTTON' && e.type == 'click') go();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Btn</button>
<input type="text">