html onclick 事件未觸發
[英]html onclick event not firing
問題描述
我想我缺少一些關於 html、javascript、DOM 和傳播或類似內容的基礎知識，但我找不到任何相關的問題/答案。
這是我的代碼：
<html> <head> <script type="text/javascript"> function click(e) { alert(e.target.id); } </script> </head> <body> <input type="button" id="btn1" onclick="alert(event.target.id);" value="MyButton1"> <input type="button" id="btn2" onclick="click(event);" value="MyButton2"> </body> </html>
MyButton1工作正常。 MyButton2沒有觸發 onclick 事件。
問題很簡單：為什么MyButton2沒有觸發事件？
2 個解決方案
解決方案1
1 已采納 2021-01-24 10:10:21
由於在與button元素對應的 DOM 元素上有一個click方法，因此將您的 function 命名為click以外的任何名稱：
<html> <head> <script type="text/javascript"> function clickMe(e) { alert(e.target.id); } </script> </head> <body> <input type="button" id="btn1" onclick="alert(event.target.id);" value="MyButton1"> <input type="button" id="btn2" onclick="clickMe(event);" value="MyButton2"> </body> </html>
請注意：您應該避免使用內聯事件處理程序，而是可以使用addEventListener() ：
<html> <head> <script type="text/javascript"> window.addEventListener('DOMContentLoaded', () => { document.getElementById('btn1').addEventListener('click', alertMessage); document.getElementById('btn2').addEventListener('click', alertMessage); }); function alertMessage(e){ alert(e.target.id); } </script> </head> <body> <input type="button" id="btn1" value="MyButton1"> <input type="button" id="btn2" value="MyButton2"> </body> </html>
解決方案2
0 2021-01-24 10:18:44
或者你可以這樣做！ 讓您 function 名稱相同！
實際上我建議這樣做（從腳本中設置這些屬性）
<html> <head> </head> <body> <input type="button" id="btn1" onclick="alert(event.target.id);" value="MyButton1"> <input type="button" id="btn2" value="MyButton2"> <script type="text/javascript"> function click(e) { alert(e.target.id); } document.getElementById("btn2").onclick = click; </script> </body> </html>
事件未啟動（onclick）
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.