按鍵事件發生兩次

Question

我正在監視我在我的網站上的一個可編輯表格，以便按下 Enter 鍵。 我可以獲得按鍵，我可以從表格中獲得我需要的信息，但讓我擔心的是keypress事件發生了兩次。 這是代碼，我將解釋我的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)