Question

所以我正在监控我在我的一个网站上输入密钥的按键的可编辑表格。我可以获得按键，我可以从表中获取所需的信息，但令我担心的是按键事件发生了两次。这是代码，我将解释我的console.log。

    element.addEventListener('keypress', function(e){
    e.preventDefault();
    var key = e.keyCode;
        if (key === 13) {
            console.log("Just some Ajax");
        }
    });

字符串“Just some Ajax”被记录两次。当您注销e.type时，事件keypress会被记录两次。
为什么这个事件是从一个按键触发两次（我没有其他事件监听器正在监听按键），我该怎么做才能阻止它？

编辑以显示与

交互的完整代码

我正在从sql数据库提供一个表，其中包含一些信息。这是“变成HTML”的PHP：

$WOT .="<tr id='$WOInfo[0]'>";
$WOT .="<td id='n$WOInfo[0]' onclick='edit(this, b$WOInfo[0])' contenteditable='false'>$WOInfo[1]</td>";
$WOT .="<td id='u$WOInfo[0]' onclick='edit(this, b$WOInfo[0])' contenteditable='false'>$WOInfo[2]</td>";
$WOT .="<td id='p$WOInfo[0]' onclick='edit(this, b$WOInfo[0])' contenteditable='false'>$WOInfo[3]</td>";
$WOT .="<td id='d$WOInfo[0]' onclick='edit(this, b$WOInfo[0])' contenteditable='false'>$WOInfo[4]</td>";
$WOT .="<td>";
$WOT .= "<button 
               type='button' 
               title='Delete'
               onclick='confDel($WOInfo[0])'>Delete</button>";
$WOT .= "<button type='button' title='Update' id='b$WOInfo[0]' onclick='confEdit($WOInfo[0], n$WOInfo[0], u$WOInfo[0], p$WOInfo[0], d$WOInfo[0])' disabled>Update</button></td>";
$WOT .="</tr>";

以下是原始示例中的完整JavaScript函数：

function edit(element, ID){
    'use strict';
    element.style.backgroundColor = "white";
    element.style.color = "black";
    element.setAttribute("contentEditable", "true");
    ID.disabled = false;
        element.addEventListener('keypress', function(e){
        e.preventDefault();
        var key = e.keyCode;
            if (key === 13) {
                console.log("Just some Ajax");
                var update = element.innerText; 
            }
        });
}

这是HTML正在与之交互的其余JavaScript代码（请不要过分判断变量的发送方式，我正在重构所有使用AJAX的哈哈）：

function confEdit(ID, name, username, password, description){
  var name = (name.innerText);
  var username = (username.innerText);
  var password = (password.innerText);
  var description = (description.innerText);
  var action;
  var r = confirm ("Are you sure you want to update the entry? This cannot be undone.");
    if (r === true){
      action = window.location = "/radiosite/other/index.php?action=upWOEntry&&ID="+ID+"&&name="+name+"&&username="+username+"&&password="+password+"&&description="+description+"";
    } else {
      action = window.location = "/radiosite/other/index.php?action=wopass";
    }
    return action;
}

Answer 1

所以经过一段时间的努力，我正在和一个网络伙伴（甚至不是程序员）谈论这个问题，只是为了让某人与之交谈并且只是说：“那么为什么你需要将这些事件嵌套??”我意识到他是对的。我意识到我可以在所有td上放置一个事件监听器，所以我真的不得不重写很多代码，但这一切都是最好的。这是需要的HTML/PHP（缩写为长度的缘故。我遗漏的唯一相关内容是表格底部的隐藏输入字段）：

<tr id='o$OTHERInfo[0]'>";
<td id='name'>$OTHERInfo[1]</td>
<td id='username'>$OTHERInfo[2]</td>
<td id='password'>$OTHERInfo[3]</td>
<td id='description'>$OTHERInfo[4]</td>

这是JavaScript：

var table = document.getElementById("passwordTable");
var data = table.getElementsByTagName("td");
for (var i=0;i<data.length;i++){
    var index = data[i];
    index.addEventListener("click", function (index){ 
        td = index.path[0];
        td.style.backgroundColor = "white";
        td.style.color = "black";
        td.setAttribute("contentEditable", "true");}, false);
                index.addEventListener("keypress", function(e){
                var key = e.keyCode;
                    if (key === 13) {
                        // just some ajax                       }
            }, false)

Keypress事件发生两次

编辑以显示与

1 个答案: