Jquery：不同的点击和输入处理程序

Question

有一个按钮。我想检测用户是否点击了它或者他按下了回车键，并根据发生的事件做一些事情。但是，当我按下回车键时，点击和输入处理程序都会执行。

我该如何解决这个问题？

HTML:

<button type="button">
  Click me
</button>

Jquery:

$("button").keydown(function(e){
    var keyCode = e.keyCode || e.which;
  if(keyCode === 13){
      $("button").after("<div> enter was pressed </div>");
    }
})

$("button").click(function(){
    $("button").after("<div> click event </div>");
})

https://jsfiddle.net/75wbo7d2/1/

Answer 1

Working fiddle

改用keyPress：

$(document).keypress(function(e) {
  var keyCode = e.keyCode || e.which;
  if(keyCode === 13){
    $("button").after("<div> enter was pressed </div>");
  }
});

$("button").click(function(){
  $(this).blur().after("<div> click event </div>");
})

希望这对您有所帮助。

$(document).keypress(function(e) {
  var keyCode = e.keyCode || e.which;
  if(keyCode === 13){
    $("button").after("<div> enter was pressed </div>");
  }
});

$("button").click(function(){
  $(this).blur().after("<div> click event </div>");
})

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

Answer 2

看https://jsfiddle.net/75wbo7d2/3/ 使用 e.preventDefault(); 你可以做到。干杯

Jquery：不同的点击和输入处理程序

Jquery: Different click and enter handlers

jquery

html

button

jquery-click-event