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

Question

我已经做好了

1. 一些html标签click事件，它通过鼠标单击和键盘输入起作用
2. 按下键盘Enter键时，某些html标签单击事件不起作用。 仅工作鼠标单击。

我都需要我们用单一方法执行

像：按钮，锚点

“ 按钮**和锚点**”-仅支持标签。

“ p，div，span，h1 ”-标签不支持。

Button和Anchor Tag仅在鼠标单击和键盘输入同时起作用！

其余元素均无法使用键盘输入Tab，为什么？

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

这是演示：

 $(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> 

谢谢J.Jayaprakash

Answer 1

您可以使用keypress事件 。

若要确定输入了哪个字符，请检查传递给处理函数的事件对象。 虽然浏览器使用不同的属性来存储此信息，但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事件。

一种替代方法是在按Enter时强制p ， div ， span和h1元素触发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');
  }
});

然后，所有元素都将对输入做出反应，就像对单击一样。 但是，您实际上应该尝试将body *替换为仅覆盖所需元素的选择器。 例如，您可以将.enterTriggersClick类.enterTriggersClick到目标元素，然后执行以下操作：

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