javascript和jquery 获取触发事件的元素
一个很简单的问题,却因为大意,经常忘了处理,导致程序运行出错.
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
</head> <body>
<ul>
<li>
<ul>
<li>listone</li>
<li>listtwo</li>
<li>listthree</li>
</ul>
</li>
</ul>
<script>
var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var i=0;
for(i=0;i<aLi.length;i++){
aLi[i].onclick=function(){
alert(this.innerHTML);
}
}
</script>
</body> </html>
我的本意是要在点击li的时候,弹出li的内容. 比如 "listone" ,"listtwo","listthree".
可是上述代码并不像想象中那样工作.
当我点击listtwo的li时,情况是这样的:
还没完,点击确定,又弹出一个框子:
这个框子并不是我们所期望弹出的东西.拿他为什么弹出呢?
回头看代码,这是因为listone,listtwo,listthree所在的UL的父元素,也是一个li,这个li也被加上了点击事件,弹出自己的innerHTML.
如何解决?
只要我们告诉javascript,只弹出我们点击的那个li的内容就可以了.就是触发点击事件的那个li.代码如下:
var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var i=0;
for(i=0;i<aLi.length;i++){
aLi[i].onclick=function(ev){
var e=ev||window.event;//获取事件
var ele=e.target||e.srcElement;//获取触发事件的元素
if(this===ele)//如果这个元素就是触发事件的元素
alert(ele.innerHTML);//弹出他的内容
}
}
问题解决.
javascript和jquery 获取触发事件的元素的更多相关文章
- js获取触发事件的元素
//获取事件 var e = window.event; //获取元素 obj = e.target || e.srcElement; console.log(e); checkRepeat(e.ta ...
- JavaScript、jQuery获取页面及个元素高度、宽度
Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.client ...
- window.event.srcElement与window.event.target 触发事件的元素 触发事件对象的获取，window.event与时间函数参数的event是同一个 事件对象
判断事件触发的元素: var tag = window.event.target || window.event.srcElement; if (tag.tagName.toLowerC ...
- JQuery获取与设置HTML元素的值value
JQuery获取与设置HTML元素的值value 作者:简明现代魔法图书馆 发布时间:2011-07-07 10:16:13 20481 次阅读 服务器君一共花费了13.221 ms进行了6次数据库查 ...
- 【JavaScript与JQuery获取H2的内容】
撰写日期:2016-7-13 11:05:07 JavaScript与JQuery获取DOM内容是有区别的,接下来看一例子 栗子: Jquery-获取H3中的内容然后Dom转换为Jquery < ...
- jQuery获取动态添加的元素，live和on的区别
今天给大家说一下如果用jQuery获取动态添加的元素,通常如果你在网页上利用jQuery添加一个元素,那么用平常的jQuery获取元素的方法无效的获取不到的.可以用以下的方法获取动态元素!假设我们现在 ...
- 使用javascript和jquery获取类方法
1.本质区别 jquery是一个javascript库.jquery是一个基于javascript语言的框架,本质上就是javascript. 2.代码编写的差异 jquery大大简化了JavaScr ...
- Js/Jquery获取iframe中的元素
转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...
- JavaScript和JQuery获取DIV的值
1.设计源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
随机推荐
- 重构24-Remove Arrowhead Antipattern（去掉箭头反模式）
基于c2的wiki条目.Los Techies的Chris Missal同样也些了一篇关于反模式的post. 简单地说,当你使用大量的嵌套条件判断时,形成了箭头型的代码,这就是箭头反模式(arrow ...
- 剑指Offer46 求1+2+...+n
/************************************************************************* > File Name: 46_Accumu ...
- jQuery选择器之子元素过滤选择器Demo
测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- UIToolbar自定义背景及按钮设置
//1.创建toolbar(MyToolbar继承UIToolbar) _myToolbar = [[MyToolbar alloc]initWithFrame:CGRectMake(kZero, ...
- 一个Itextsharp 批量添加图片到pdf 方法
这里我就直接把我的页面贴进来了 using System; using System.Collections.Generic; using System.Web; using System.Web.U ...
- Echarts 使用遇到的问题
1.在使用ECharts的数据视图时,单击打开数据视图如下,当单击close按钮时,如果当前图像区域包含在一个<from></from>标签中,则会刷整个新页面, 去掉< ...
- C# 输出24小时格式时间
比如 MessageBox.Show(DateTime.Now.ToString("yyyy-MM-dd hh:mm:ss")); 会输出 2014-4-3 5:08:4[1 ...
- Javascript之拖拽库
在手机上运行触屏拖动时,我发现页面并没有反应,服务器端执行javascript在手机端与电脑端不能“相同式”实现(电脑端运行正常,而手机端不一样),这是为甚么呢? 首先,我们都知道javascript ...
- C#如何关闭一个窗口的同时打开另一个窗口
在.net的WinForm程序中,如果是直接起动的Form作为主窗口,那么这个主窗口是不能关闭的,因为它维护了一个Windows消息循环,它一旦关闭了就等于声明整个应用程序结束,所以新打开的窗口也就被 ...
- 安装包安装服务，点修复出现的错误”Error 1001:指定的服务已存在“ 解决办法
安装项目下,右键视图->自定义操作,出现安装.提交.回滚.卸载四个文件夹,右键安装,添加自定义操作,选择安装的服务为输出文件 右键安装输出文件->在condition->Not (I ...