Question

我已经完成

一些html标签单击事件，通过单击鼠标和键盘输入
某些html标签点击事件在以下情况下不起作用按键盘上的Enter键。只能用鼠标单击。

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

like：按钮，锚点

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

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

按钮和锚标签仅在鼠标单击和键盘输入同时起作用   ！

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

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

这是演示：

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

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

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事件。 / kbd>：

$(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) { ...

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

1 个答案: