Как обработать событие щелчка мышью и клавиатурой?

Question

Я сделал

1. некоторые клики html-тегов, они работают по щелчку мыши и ввод с клавиатуры
2. некоторые html-тэги не работают, когда нажмите на клавиатуре ввод. только рабочий щелчок мышью.

Мне нужно и то, и другое, мы в одном методе

нравится: кнопка, якорь

" Button ** и Anchor **" - теги только для поддержки.

" 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 .

Чтобы определить, какой символ был введен, изучите объект события, который передается в функцию-обработчик. Хотя браузеры используют разные свойства для хранения этой информации, 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(). В противном случае, нажав , введите , и вы вызовете события click и keypress.

Альтернативой может быть принудительное использование элементов 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").keypress(function(e) { ...