javascript - 如何将 EventListener 添加到表格单元格

Question

我想向表格单元格添加一个 eventListener，以便每次单击表格单元格时执行一个函数。

var getDaysInMonth = function (year, month) {
    return new Date(year, month, 0).getDate();
}



var calendar = {
    month: function () {
        var d = new Date();
        return d.getMonth() + this.nextMonth;
    },

    year: function () {
        var y = new Date();
        return y.getFullYear();
    },

    nextMonth: 1,
    
    cellColor: 'white',
    
}



var loopTable = function () {
    var daysInMonth = getDaysInMonth(calendar.year(), calendar.month());
    var table = document.getElementById('myTable');
    var rows = table.rows;
    var l = 1;
    var month = calendar.month();
    var year = calendar.year();
    var firstDay = new Date(year + "-" + month).getDay();
    var currentDay = new Date().getDay();
    var dayOfMonth = new Date().getDate();

 
    for (let i = 1; i < rows.length; i++) {

        if (rows[i] == rows[1]) {

            var k = 1;

            for (let j = firstDay; j < rows[i].cells.length; j++) {

                if (k === dayOfMonth && calendar.nextMonth === 1) {
                    rows[i].cells[j].style.backgroundColor = calendar.cellColor;
                

                }

                if (k <= daysInMonth) {
                    rows[i].cells[j].innerHTML = k;
                    k++
                }

            }
        } else {
            for (let j = 0; j < rows[i].cells.length; j++) {
                if (k === dayOfMonth && calendar.nextMonth === 1) {
                    rows[i].cells[j].style.backgroundColor = calendar.cellColor;
                }
                if (k <= daysInMonth) {
                    rows[i].cells[j].innerHTML = k;
                    k++
                }
            }
        }
    }
}

loopTable();
clickCell();

function monthTitle() {

    var monthsArray = ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.', 'Sept.', 'Oct.', 'Nov.', 'Dec.'];
    monthNum = calendar.month();
    var monthName = monthsArray[calendar.month() - 1] + '' + calendar.year();
    var title = document.getElementById('calendarTitle');
    var nextArrow = document.getElementById('nxt');
    var leftArrow = document.getElementById('prev');

  
    if (monthName === ('Dec.' + '' + calendar.year())){
        xmas();
    }
    if (monthNum >= 12) {
        nextArrow.className += ' inactiveLink';
    } else if (monthNum <= 1) {
        leftArrow.className += ' inactiveLink';
    } else {
        nextArrow.classList.remove('inactiveLink');
        leftArrow.classList.remove('inactiveLink');
    }

    title.innerHTML = '';
    var titleNode = document.createTextNode(monthName);
    title.appendChild(titleNode);


}
monthTitle();

function nextMonth() {
    clearTable();
    calendar.nextMonth += 1;
    monthTitle();
    loopTable();
}

function previousMonth() {
    clearTable();
    calendar.nextMonth -= 1;
    monthTitle();
    loopTable();
}

function clearTable() {
    var table = document.getElementById('myTable');
    var rows = table.rows;

    for (var i = 1; i < rows.length; i++) {
        cells = rows[i].cells;
        for (var j = 0; j < cells.length; j++) {
            if (cells[j].innerHTML = '') {
                cells[j].style.display = 'none';
            }
            cells[j].innerHTML = '';
            cells[j].style.backgroundColor = '#D9534F';
            cells[j].style.emptyCells = 'hide';
        }
    }
}

var next = document.getElementById('nxt');
var previous = document.getElementById('prev');
var table = document.getElementById('myTable');
var cell = table.rows;
next.addEventListener('click', nextMonth);
previous.addEventListener('click', previousMonth);



function clickCell() {
    var row = document.getElementById('myTable').rows;
    
    for (var i = 0; i < row.length; i++) {
        for (var j = 0; j < row[i].cells.length; j++ ) {
  					
            row[i].cells[j].addEventListener('click', function(){
  					console.log('click');
            })
        }
    }
}
clickCell();

body {
            background-color: rgb(0, 121, 191);
        }
        
        table {
            width: 50%;
            background-color: #D9534F;
            border: 1px solid white;
            padding: 10px;
            padding-bottom: 20px;
            font-size: 25px;
            border-radius: 25px;
            position: relative;
            margin: auto;
        }
        
        td {
            border: 1px solid white;
            text-align: center;
            font-weight: 600;
            font-size: 20px;
            padding: 20px;
        }
        
        th {
            height: 50px;
        }
        
        .calArrows {
            text-decoration: none;
            color: white;
            font-size: 35px;
        }
        
        #nxt {
            font-size: 30px;
            position: absolute;
            top: 0;
            right: 25%
        }
        
        #prev {
            font-size: 30px;
            position: absolute;
            top: 0;
            left: 25%;
        }
        
        #calendarTitle {
            font-family: 'Indie Flower', cursive;
            font-weight: 600;
            font-size: 25px;
            color: white;
        }
        
        .inactiveLink {
            cursor: not-allowed;
            pointer-events: none;
             
        }
        
        #myTable {
            empty-cells: hide;
        }
        
        .xmasDec {
            width: 90%;
            height: 70%;
            position: absolute;
            top: -10%;
            left: 5%;
        }
        
        #calWraper {
            position: relative;
        }
        
        #myCan {
            position: absolute;
            top: 0;
            left: 10%;
            width: 90%;
            height: 70%;
            opacity: 0, 5;
        }

<body>
    <canvas class="myCan" width="100" height="100"></canvas>
    <div id="calWraper">
        <table id="myTable">
            <caption id="calendarTitle">Test</caption>
            <tr>
                <th>Sun</th>
                <th>Mon</th>
                <th>Tue</th>
                <th>Wed</th>
                <th>Thur</th>
                <th>Fri</th>
                <th>Sat</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
        <canvas id="myCan" width="200" height="200" style="background-color: transparent"></canvas>
            <a href="#" id="prev" class="calArrows"><i class="fa fa-arrow-left" ></i></a>
        <a href="#" id="nxt" class="calArrows"><i class="fa fa-arrow-right" ></i></a>



    </div>



</html>

我尝试创建一个函数，它将遍历行和单元格并将 eventListener 添加到每个 .但它似乎不起作用，它在随机实例上工作，这确实是一种奇怪的行为。这是我创建的函数:

function clickCell() {
    var row = document.getElementById('myTable').rows;
 for (var i = 0; i < row.length; i++) {
        for (var j = 0; j < row[i].cells.length; j++ ) {
                    console.log(row[i].cells[j].innerHTML);
            row[i].cells[j].addEventListener('click', function(){
                    console.log('click');
            })
        }
    }
}

Answer 1

您的 Canvas 似乎与您的 table 重叠。因为表格中的 td 元素永远不会被点击。

您需要将 CSS 属性 pointer-events:none 添加到您的 Canvas 。

#myCan {
    ...
   pointer-events: none;
}

这样它就不会再阻止表格被点击了。

您还可以更简单地将事件监听器添加到您的单元格:

document.querySelectorAll('#myTable td')
.forEach(e => e.addEventListener("click", function() {
    // Here, `this` refers to the element the event was hooked on
    console.log("clicked")
}));

为每个单元格创建一个单独的函数；相反，您可以共享一个功能而不会丢失任何功能:

function clickHandler() {
    // Here, `this` refers to the element the event was hooked on
    console.log("clicked")
}
document.querySelectorAll('#myTable td')
.forEach(e => e.addEventListener("click", clickHandler));

---

有些浏览器在 querySelectorAll 返回的 HTMLCollection 上仍然没有 forEach，但它很容易填充:

if (!HTMLCollection.prototype.forEach) {
    Object.defineProperty(HTMLCollection.prototype, "forEach", {
        value: Array.prototype.forEach
    });
}

如果您必须支持没有Array.prototype.forEach 的真正过时的浏览器，请参阅the polyfill on MDN .