單擊事件適用於Chrome和Edge，但不適用於Firefox

Question

在我正在工作的項目中，我單擊一些具有給定ID的按鈕，然后收集這些ID以在某些表中顯示數據。 它在chrome和edge上都可以正常工作，但是每次我使用firefox時，id都會返回為undefined。

代碼如下：

 function reply_clickGF(e) { // collect the id of the button clicked e = e || window.event; console.log(e); e = e.target || e.srcElement; var clickId = e.id; } 

 <div id="groundFloor" class="tab active"> <br> <h2>Ground Floor</h2> <div id="buttonDispGF" style=" background-image: url('img/ground floor.jpg')" onclick="reply_clickGF()"> <div id="maxTableGF"> <p> Maximum values over the last week:</p> <table style="width: 100%" class="maxTable"> <tbody> <tr> <th class="border">Sensor Type</th> <th class="border">Max Reading</th> <th class="border">Mote Id</th> </tr> <tr> <td class="border">Pir (Presence) </td> <td class="border" id="data">1</td> <td class="border" id="data">106</td> </tr> <tr> <td class="border">Magnetic (Door) </td> <td class="border" id="data">1</td> <td class="border" id="data">106</td> </tr> <tr> <td class="border">Acoustic (dB) </td> <td class="border" id="data">38.69</td> <td class="border" id="data">106</td> </tr> </tbody> </table> <div id="table"> <table id="colourCode"> <tbody> <tr> <td height="70"><svg width="50" height="40"> <circle cx="20" cy="20" r="13.5" stroke="black" stroke-width="2" fill="green"></circle> </svg></td> <td height="70">Last Reading Within 12 Hours</td> </tr> <tr> <td height="70"><svg width="50" height="40"> <circle cx="20" cy="20" r="13.5" stroke="black" stroke-width="2" fill="yellow"></circle> </svg></td> <td height="70">Last Reading Between the Last 12 to 24 Hours </td> </tr> <tr> <td height="70"><svg width="50" height="40"> <circle cx="20" cy="20" r="13.5" stroke="black" stroke-width="2" fill="red"></circle> </svg></td> <td height="70">Last Reading Over 24 Hours or no Data for This Mote</td> </tr> </tbody> </table> </div> </div> <a href="#GFDisplay" class="tooltip" style="left: 600px; top: 140px;"><input type="button" value="104" name="104" id="104" class="button" onmouseover="handler(this)" style="position: absolute; border: 2px solid black; background-color: red;"></a> <a href="#GFDisplay" class="tooltip" style="left: 530px; top: 210px;"><input type="button" value="105" name="105" id="105" class="button" onmouseover="handler(this)" style="position: absolute; border: 2px solid black; background-color: red;"></a> <a href="#GFDisplay" class="tooltip" style="left: 400px; top: 80px;"><input type="button" value="106" name="106" id="106" class="button" onmouseover="handler(this)" style="position: absolute; border: 2px solid black; background-color: green;"></a> <a href="#GFDisplay" class="tooltip" style="left: 440px; top: 120px;"><input type="button" value="205" name="205" id="205" class="button" onmouseover="handler(this)" style="position: absolute; border: 2px solid black; background-color: red;"></a> </div><br><br> <div class="buttonDisplay"> <a href="#GFDisplay"><button type="button" class="dataButton" id="displayTables" onclick="displayAllTablesGF()"> Display All Motes Data</button></a> <button type="button" class="dataButton" id="clearAll" onclick="resetGF()">Clear All</button> </div> <div id="GFDisplay"></div> </div> 

有人可以通過提供可以在所有3種瀏覽器中運行的指針來幫助我嗎？

Answer 1

我自己解決了這個問題，只需將事件添加到我的html中的reply_clickGF（）中，現在就可以在所有三種瀏覽器中使用了。

  <div id="buttonDispGF" style=" background-image: url('img/ground floor.jpg')" onclick="reply_clickGF(event)"> 

：