简体   繁体   中英

Keypress event happening twice

I am monitoring an editable table I have on one of my website for the keypress of the enter key. I can get the keypress and I can get the information I need from the table, but what worries me is that the keypress event is happening twice. Here is the code and I will explain my console.log s.

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

The string "Just some Ajax" is getting logged twice. And when you log out e.type the event keypress is logged twice.
Why is this event being triggered twice from one keypress (I have no other eventlisteners listening for a keypress) and what can I do to prevent that?


Edit to show full code being interacted with

I am serving a table from a sql database with some information in it. Here is the PHP that 'turns into the HTML':

$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>";

Here is the full JavaScript function from the original example:

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

And here is the rest of the JavaScript code the HTML is interacting with (and please, don't judge too hard on how the variables are being sent, I'm refactoring it all to use AJAX haha):

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

So after a while of head scratching, I was talking to a networking buddy (not even a programmer) about this issue, just to have someone to talk to and just said: "well why do you need the events to be nested??" And I realized he was right. And I realized I could just put an event listener on all of my td 's, so I really had to rewrite a lot of the code, but it was all for the best. Here was the HTML/PHP that was needed (abbreviated for length's sake. The only thing pertinent that I left out was a hidden input field in the bottom of the table):

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

And here was the 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)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM