Trigger an event on click or when enter key is pressed [JavaScript] - Stack Overflow

admin管理员组

文章数量:1426325

I wrote this code and only the click event is working, but key event doesn't. Can anyone explain to me why?

Btn_List.addEventListener("keypress", function(e) {

	var key = e.keyCode();

	if (key === 13) {

		function OnKeyEnterPressDoThis() {
			Input_Tarea();
			showTheNmbrOfListElmts();
			orderAlphaFukkabossList();
		}

	}

});

// Agregar Tarea
Btn_List.addEventListener("click", function() {
	Input_Tarea();
	showTheNmbrOfListElmts();
	orderAlphaFukkabossList();
});

I wrote this code and only the click event is working, but key event doesn't. Can anyone explain to me why?

Btn_List.addEventListener("keypress", function(e) {

	var key = e.keyCode();

	if (key === 13) {

		function OnKeyEnterPressDoThis() {
			Input_Tarea();
			showTheNmbrOfListElmts();
			orderAlphaFukkabossList();
		}

	}

});

// Agregar Tarea
Btn_List.addEventListener("click", function() {
	Input_Tarea();
	showTheNmbrOfListElmts();
	orderAlphaFukkabossList();
});

• javascript

Share Improve this question Follow edited May 12, 2017 at 5:58 zer00ne 44.5k66 gold badges4848 silver badges8080 bronze badges asked Apr 23, 2017 at 17:59 Emmanuel RuizEmmanuel Ruiz 3311 silver badge66 bronze badges 1

• o my... god deam works XD: writted.addEventListener("keypress", function(e){ var key = e.keyCode; if (key === 13) { Input_Tarea(); showTheNmbrOfListElmts(); AlphabeticOrderInTheList(); } }, false); – Emmanuel Ruiz Commented May 12, 2017 at 6:50

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You're not calling OnKeyEnterPressDoThis inside the keypress event listener, you're declaring the function. Move the function out of the event listener and call it when the event is called.

Also use e.keyCode instead of e.keyCode(); since keyCode it's not a function.

In some browsers e.keyCode is undefined, you have to use e.which in those cases.

So something like this should add a little of browser support:

var key = e.which || e.keyCode || 0;

Code:

function OnKeyEnterPressDoThis() {
    Input_Tarea();
    showTheNmbrOfListElmts();
    orderAlphaFukkabossList();
}

Btn_List.addEventListener("keypress", function(e) {

    var key = e.which || e.keyCode || 0;

    if (key === 13) {
        OnKeyEnterPressDoThis();
    }

});

// Agregar Tarea
Btn_List.addEventListener("click", OnKeyEnterPressDoThis);

try e.which

 Btn_List.addEventListener("keypress" , function(e){ 
    var key = e.which;
                   alert(key)
 });
 Btn_List.addEventListener("click" , function(e){ 
      alert('ff') 
  });

1. You should scan for e.which, since some browsers don't honor e.keyCode
2. You should use e.preventDefault() because an enter on a button triggers a click event (for accessibility reasons)
3. You should avoid using keypress and instead use the keydown or keyup events in order to avoid double-events (as mentioned in #2 above)

var Btn_List = document.querySelector('button');

Btn_List.addEventListener("keydown", function(e) {

  var key = e.which && e.which || e.keyCode();

  if (key !== 9)
    e.preventDefault(); // allow tab

  if (key === 13) {
    console.log('Enter pressed');
    (function OnKeyEnterPressDoThis() {
      Input_Tarea();
      showTheNmbrOfListElmts();
      orderAlphaFukkabossList();
    }());
  }

});

// Agregar Tarea
Btn_List.addEventListener("click", function(e) {
  console.log(e.type);
  Input_Tarea();
  showTheNmbrOfListElmts();
  orderAlphaFukkabossList();
});

function Input_Tarea() {
  console.log('Input_Tarea');
}

function showTheNmbrOfListElmts() {
  console.log('showTheNumbrOfListElmts');
}

function orderAlphaFukkabossList() {
  console.log('orderAlphaFukkabossList');
}

<button>Click</button>
<button onClick="console.clear()">clear console</button>

本文标签： Trigger an event on click or when enter key is pressed JavaScriptStack Overflow