如何处理鼠标和键盘的点击事件？

Question

我已经完成了

1. 一些html标签点击事件通过鼠标点击和 键盘输入
2. 某些 html 标签点击事件不工作时 按键盘输入。只需单击鼠标即可。

我需要两个都是我们在单一方法中执行的

喜欢：按钮、锚点

"Button **and Anchor**" - 仅支持 .

"p,div,span,h1"- 标签不支持。

按钮和锚标记仅适用于鼠标单击和键盘输入 ！

使用键盘输入的剩余元素不工作选项卡为什么？

不要说键盘输入的keycode方法我需要类似的按钮和锚标签

这里是演示：

$(document).ready(function(){
    $("p").click(function(){
        alert("The paragraph was p.");
    });
  
  $("div").click(function(){
        alert("The paragraph was div.");
    });
  
  $("span").click(function(){
        alert("The paragraph was span.");
    });
  
  $("h1").click(function(){
        alert("The paragraph was h1.");
    });
  
  $("button").click(function(){
        alert("The paragraph was button.");
    });
  
    $("a").click(function(){
        alert("The paragraph was a.");
    });
  
});

* {
  margin-bottom:20px;
}

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

<h2>Button and Anchor Tag only working both mouse click and keyboard enter ! </h2>
<h2>remaining element are not working tab using keyboard enter ? </h2>
<br>

<br>
<p tabindex="0">Click on this paragraph.</p>
<div tabindex="0">Click on this div.</div>
<span tabindex="0">Click on this span.</span>
<h1 tabindex="0">Click on this h1.</h1>
<button> Click on this button.</button> <br>
<a href="#"> Click on this anchor </a> 

谢谢 贾亚普拉卡什

Answer 1

您可以使用keypress event。

要确定输入了哪个字符，请检查传递给处理函数的事件对象。虽然浏览器使用不同的属性来存储这些信息，但 jQuery 对 .which 属性进行了规范化，因此您可以可靠地使用它来检索字符代码。

function alertTag( tag ){
  alert("The element was " + $(tag).prop("tagName"));
}

$(document).ready(function() {
  $("p, div, span, h1, button, a").click(function(e) {
    alertTag(e.target);
  }).keypress(function(e) {
    if (e.which == 13) {
      e.preventDefault(); // optionally
      alertTag(e.target);
    }
  });
});

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

<p tabindex="0">Click on this paragraph.</p>
<div tabindex="0">Click on this div.</div>
<span tabindex="0">Click on this span.</span>
<h1 tabindex="0">Click on this h1.</h1>
<button> Click on this button.</button> <br>
<a href="#"> Click on this anchor </a>

如果您想对所有元素使用相同的方法（虽然我看不出这样做的意义），您需要包含e.preventDefault()。否则，当按下 enter 时，您将同时触发 click 和 keypress 事件。

另一种方法是强制 p、div、span 和 h1 元素在按下 enter 时触发 click 事件：

$(document).ready(function() {
  $("p, div, span, h1, button, a").click(function(e) {
    alert("The element was " + $(e.target).prop("tagName"));
  });
  
  $("p, div, span, h1").keypress(function(e) {
    if (e.which == 13) {
      $(e.target).trigger('click');
    }
  });
});

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

<p tabindex="0">Click on this paragraph.</p>
<div tabindex="0">Click on this div.</div>
<span tabindex="0">Click on this span.</span>
<h1 tabindex="0">Click on this h1.</h1>
<button> Click on this button.</button> <br>
<a href="#"> Click on this anchor </a>

如果您真的想为 所有 HTML 标记执行此操作（即使我认为这不是一个好主意），您可以执行以下操作。

$("body *").keypress(function(e) {
  if (e.which == 13) {
    $(e.target).trigger('click');
  }
});

然后，所有元素都会对 enter 做出反应，就像它们对点击一样。但是您真的应该尝试将 body * 替换为仅涵盖您想要的元素的选择器。例如，您可以将.enterTriggersClick 类添加到目标元素，然后执行以下操作：

$(".enterTriggersClick").keypress(function(e) { ...