JavaScript 实现按钮点击事件监听与判断
作者:流萤时间:2026-10-29 18:47:23浏览:384
本文介绍如何使用 JavaScript 监听全局点击事件,并通过判断目标元素的标签名和类型来识别是否点击了按钮。代码兼容 Firefox 等浏览器,通过 event.target 获取触发元素,适用于简单的按钮点击检测场景。
JavaScript 按钮点击检测实现
以下直接提供相关代码实现。
Firefox 浏览器兼容版本:
<HTML>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<HEAD>
<TITLE></TITLE>
<script>
document.onclick=function(e){
var evt=e||window.event;
var tar=evt.target||evt.srcElement;
if( (tar.tagName.toLowerCase()=="input"&&tar.type=="button") || tar.tagName.toLowerCase()=="button"){
alert("你点击的是一个按钮")
}
}
</script>
</HEAD>
<BODY>
<input id="button1" type="button" value="1111"/>
<input id="button2" type="button" value="2222"/>
<input id="button3" type="button" value="3333"/>
<input id="button4" type="button" value="4444"/>
</BODY>
</HTML>
google 浏览器版:
<HTML>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<HEAD>
<TITLE></TITLE>
<script>
document.onclick=function()
{ var obj = event.srcElement;
if(obj.type == "button"){
alert(obj.id); }
}
</script>
</HEAD>
<BODY>
<input id="button1" type="button" value="1111"/>
<input id="button2" type="button" value="2222"/>
<input id="button3" type="button" value="3333"/>
<input id="button4" type="button" value="4444"/>
</BODY>
</HTML>
以上即为 JavaScript 中判断按钮被点击的具体方法,供参考使用。
作者最新文章
怎么在 Vue 或 React 项目中正确集成 animate.js
2026-11-05 10:23:38
JS注册事件:addEventListener基础语法与参数详解
2026-11-05 08:44:56
JSP和JS的区别:运行环境与服务端/客户端职责解析
2026-11-04 23:34:36
pdf.js 官方下载地址:GitHub Release 获取预编译包
2026-11-04 23:07:27
前端学习路径:为什么建议先掌握HTML再学习JavaScript?
2026-11-04 18:56:08
