dom events - JavaScript to run code when table row loses focus - Stack Overflow

admin管理员组

文章数量:1336632

I have a html table and I'm trying to use jJavascript to trigger an event whenever a row loses focus but the "blur" event doesn't seem to be right as nothing is firing:

(quick example of what I'm doing)

<tr class="tableRow">
    <td class="tg-amwm" contentEditable="true">hours</td>
    <td class="tg-amwm" contentEditable="true">minutes</td>
    <td class="tg-amwm" contentEditable="true">hours</td>
    <td class="tg-amwm" contentEditable="true">minutes</td>
</tr>

and I"m using the following:

var rows = document.getElementsByClassName("tableRow");

for(i = 0; i < rows.length; i++) {
    rows[i].addEventListener("blur", function(){console.log("row left!");});
}

but nothing is apprearing in the console - am I misunderstanding the event/DOM structure?

I have a html table and I'm trying to use jJavascript to trigger an event whenever a row loses focus but the "blur" event doesn't seem to be right as nothing is firing:

(quick example of what I'm doing)

<tr class="tableRow">
    <td class="tg-amwm" contentEditable="true">hours</td>
    <td class="tg-amwm" contentEditable="true">minutes</td>
    <td class="tg-amwm" contentEditable="true">hours</td>
    <td class="tg-amwm" contentEditable="true">minutes</td>
</tr>

and I"m using the following:

var rows = document.getElementsByClassName("tableRow");

for(i = 0; i < rows.length; i++) {
    rows[i].addEventListener("blur", function(){console.log("row left!");});
}

but nothing is apprearing in the console - am I misunderstanding the event/DOM structure?

• javascript
• dom-events
• onblur

Share Improve this question Follow edited Oct 28, 2020 at 9:03 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 10, 2016 at 15:25 SierraOscarSierraOscar 17.6k66 gold badges4242 silver badges7070 bronze badges 10

• "focus" is something that happens to interactive elements like <input>. – Pointy Commented Sep 10, 2016 at 15:26
• @Pointy: No, non-interactive elements can have focus too. – T.J. Crowder Commented Sep 10, 2016 at 15:26
• @Pointy poor choice of words on my part - I'm using the "blur" event because it's not an input element and for cross-browser support. – SierraOscar Commented Sep 10, 2016 at 15:26
• 1 @ Macro Man: The table row probably never receives focus. If you click a table cell, the cell will receive focus, but not the row. – T.J. Crowder Commented Sep 10, 2016 at 15:27
• 1 Wow it seems like it's kind-of plicated and open to user agent interpretation w3c.github.io/html/editing.html#focusable – Pointy Commented Sep 10, 2016 at 15:31

 |  Show 5 more ments

2 Answers 2

Sorted by: Reset to default 4

The row probably never receives focus, the cells in it do.

Unfortunately, blur doesn't bubble. But if you hook blur on each cell, then click one of those cells to give it focus, then click something else to take focus away, it should work:

var cells = document.querySelectorAll(".tableRow td");

for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener("blur", handler);
}

function handler() {
  console.log("row left!");
}

<p>Click a cell below to give it focus</p>
<table>
  <tbody>
    <tr class="tableRow">
      <td class="tg-amwm" contenteditable>hours</td>
      <td class="tg-amwm" contenteditable>minutes</td>
      <td class="tg-amwm" contenteditable>hours</td>
      <td class="tg-amwm" contenteditable>minutes</td>
    </tr>
  </tbody>
</table>
<p>Click here to take focus away</p>

Alternately, use focusout, which was originally an IE-only event but which has been added to Chrome but not, as far as I can tell, Firefox:

document.querySelector("table").addEventListener("focusout", function() {
  console.log("Left!");
});

<p>Click a cell below to give it focus</p>
<table>
  <tbody>
    <tr class="tableRow">
      <td class="tg-amwm" contenteditable>hours</td>
      <td class="tg-amwm" contenteditable>minutes</td>
      <td class="tg-amwm" contenteditable>hours</td>
      <td class="tg-amwm" contenteditable>minutes</td>
    </tr>
  </tbody>
</table>
<p>Click here to take focus away</p>

---

Side note for jQuery users: jQuery makes focus and blur bubble even though they don't natively, so you could use event delegation for the above with jQuery.

I got around this limitation by rather a troublesome way, but it suits my use-case,

The main idea behind the code below is that each row has a unique ID, which I check via a jQuery method that checks each time a row element is clicked, then I store that ID in a temp variable, then update it when a new row is clicked.

I've included a code snippet which you can test by going from one row to another, it should show "same row" alert if you're still in the same row, and "new row" when you leave the row and click on another row.

 var tempID = 0
  $(document).ready(function () {
    $('#MainContent_tbl tr').click(function (event) {
        var elID = $(this).attr('id');
        if (elID){
          if(tempID !=  elID){
            if(tempID == 0){
              tempID = elID;
            }
            else{
              alert('New Row')
              tempID = elID;
            }
            
          }
          else{
            alert('same row')
          }
          
          
        }
        
    });
  });

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<table id="MainContent_tbl">
<thead>
      <tr>
          <th>Supplier ID</th>
          <th>Shop Name</th>

  </thead>
  <tbody>
  <tr  id="1"> 
  <td>
  supplier 1
  </td>
    <td>
  Shop 1
  </td>
  </tr>
  
    <tr  id="2"> 
  <td>
  supplier 2
  </td>
    <td>
  Shop 2
  </td>
  </tr>
  
  </tbody>
  
</table>
</html>

本文标签： dom eventsJavaScript to run code when table row loses focusStack Overflow