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 ...
随机推荐
- Android adb not responsing
netstat -aon | findstr "5037" and you will find the process "kadb.exe" that used ...
- 【Android 界面效果39】android:inputType问题
1. 在XML代码中实现比较简单, 直接设置android:inputType="textMultiLine": [mw_shl_code=java,true]<EditT ...
- epoll实现linux进程通信
server.c #include <stdio.h> #include <stdlib.h> #include <string.h> #include <s ...
- 如何解决firefox下window.event的问题
一.在函数中传递event参数 在函数中传递event参数,这样我们就可以兼容IE和FF的event的获取了,如下面的函数: function _test(evt){ var src = evt ...
- 使用JDBC-ODBC读取Excel文件
以下代码我没有真正去实践,紧做为总结,方便以后查阅: 这种方法需要设置ODBC源..... 参考: http://xytang.blogspot.com/2008/02/how-to-connect- ...
- iPhone开发 Swift - NSNotification 通知
Swift创建Notification通知 创建一个SingleView Application 打开AppDelegate.swift,在方法 application(application:UIA ...
- Javascript中关于数组的认识
昨天在练习js中cookie的时候,知道js中的cookie是一个字符串,这与php中的操作cookie还是有很大的差别的,起初我是以php的思维来学习怎么样使用使用js中的cookie. js中的c ...
- echo,printr,print_r之间的区别
echo 返回值是void,可以一次输出多个值,多个值之间用逗号分隔.echo是语言结构(language construct)也就是关键字,而并不是真正的函数,因此不能作为表达式的一部分使用.使用的 ...
- 初识--Ajax & Json
1,AJAX是一种进行页面局部异步刷新技术. 用AJAX向服务器发送请求和获得服务器返回的数据并更新到页面中. 不是刷新整个页面,而是在HTML页面中使用JavaScript创建XMLHTTPRequ ...
- Table of Contents - Lombok
Installation Lombok Annotations @Getter, @Setter, @ToString, @EqualsAndHashCode & @Data @NoArgsC ...