javascript - js原生事件委托
本文介绍了javascript - js原生事件委托的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
下面的事件委托我只想点击的时候判断他的nodename
是不是等于'a'
而不是还要等于什么h3
和div
之类的,这要怎么做?
如果是判断nodename
如果是等于a
的话,必须不能点到h3
和div
标签,不然没反应
<ul id="parent-list">
<li id="post-1"><a href="#" style="display:block"><h3>Item 1</h3><div>我是div</div> </a></li>
<li id="post-2"><a href="#" style="display:block"><h3>Item 1</h3><div>我是div</div> </a></li>
<li id="post-3"><a href="#" style="display:block"><h3>Item 1</h3><div>我是div</div> </a></li>
<li id="post-4"><a href="#" style="display:block"><h3>Item 1</h3><div>我是div</div> </a></li>
</ul>
<script type="text/javascript">
document.getElementById("parent-list").addEventListener("click",function(e) {
var nodename = e.target.nodeName.toLocaleLowerCase();
if(e.target && (nodename == "h3" || nodename == "div")) {
alert(e.target.nodeName);
}
},false);
</script>
解决方案
JS
document.getElementById("parent-list").addEventListener("click",function(e) {
var nodename = e.target.nodeName.toLocaleLowerCase();
if(e.target && nodename == "a") {
alert(e.target.nodeName);
}
},false);
CSS
#parent-list > li > a *{
pointer-events: none;
}
这样可以满足你的需求,详见:http://jsrun.net/LLKKp
这篇关于javascript - js原生事件委托的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文