Question

我编写了这段代码，只有click事件正在运行，但关键事件却没有。任何人都可以向我解释原因吗？

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();
});

Answer 1

你没有在keypress事件监听器中调用OnKeyEnterPressDoThis，而是声明了这个功能。将函数移出事件侦听器，并在调用事件时调用它。

同样使用e.keyCode代替e.keyCode();，因为keyCode它不是函数。

在某些浏览器e.keyCode未定义的情况下，您必须在这些情况下使用e.which。

所以像这样的东西应该增加一些浏览器支持：

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

<强>代码：

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);

Answer 2

尝试e.which

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

Answer 3

您应该扫描e.which，因为有些浏览器不尊重e.keyCode
您应该使用e.preventDefault()，因为按钮上的输入会触发点击事件（出于辅助功能原因）
您应该避免使用keypress而是使用keydown或keyup事件，以避免双重事件（如上面＃2中所述）

＆＃13;

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');
}

＆＃13;

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

＆＃13;

点击或按下回车键时触发事件[JavaScript]

3 个答案: