JS检测页面中哪个HTML标签触发点击事件的方法


Posted in Javascript onJune 17, 2016

本文实例讲述了JS检测页面中哪个HTML标签触发点击事件的方法。分享给大家供大家参考,具体如下:

在html标签中,为了页面显示的美观,会在标签中相互嵌套,在做“效果”的时候就难免不了的添加各种事件,例如:
<a href=""><span onclick="">dddd</span></a>
当用户点击的时候,想确定是链接产生的事件还是span标签onclick标签产生的事件,这个有时候是很有必要的,至少我认为在调试的时候有作用,因此我写了一个简单的demo,用于各位看官学习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
//得到触发事件的控件
function test(obj){
//下面这种方式用来检测到底是哪个空间触发的事件的工具
  alert(window.event.srcElement.tagName);
}
</script>
<title>无标题文档</title>
</head>
<body>
  <input type="button" value="test" onclick="test(this)"/>
  <button type="button" value="test" onclick="test(this)">ddddd</button>
  <span type="button" value="test" onclick="test(this)">span</span>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
奇妙的js
Sep 24 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 #Javascript
jQuery实现区域打印功能代码详解
Jun 17 #Javascript
javascript日期比较方法实例分析
Jun 17 #Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 #Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 #Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 #Javascript
JS中递归函数
Jun 17 #Javascript
You might like
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
基于JQuery的cookie插件
2010/04/07 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
js实现进度条的方法
2015/02/13 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
python执行get提交的方法
2015/04/29 Python
构建Python包的五个简单准则简介
2015/06/15 Python
python机器学习之神经网络(二)
2017/12/20 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
Pytorch的mean和std调查实例
2020/01/02 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
python wsgiref源码解析
2021/02/06 Python
Python之Sklearn使用入门教程
2021/02/19 Python
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
最新销售员个人自荐信
2013/09/21 职场文书
中学生演讲稿
2014/04/26 职场文书
员工合理化建议书
2014/05/19 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS