找回密码
 注册

QQ登录

只需一步,快速开始

查看: 1808|回复: 7

[技术相关] 复杂点的HTML结构采用冒泡/捕获问题讨论

[复制链接]
发表于 2014-3-18 22:32:35 | 显示全部楼层 |阅读模式
本帖最后由 mycggo 于 2014-3-18 22:35 编辑

比如手机网站:
1: 对于结构简单的HTML比如<li>xxx</li>可以很方便通过冒泡/捕获在<li>上来触发事件;
2: 对于结构复杂点的HTML比如<li><h3>xxx</h3><p><strong>xxx</strong>xxx</p></li>,我一般是通过遍历<li>触发事件,能否也像上面一样通过冒泡/捕获在<li>上触发事件呢? 注:<li>里面的子元素已经把<li>填充满了,这样<li>的事件触发就没意义了。

 提示:您可以先修改部分代码再运行

发表于 2014-3-19 09:30:34 | 显示全部楼层
本帖最后由 xmlovedoudou 于 2014-3-19 09:32 编辑

我说说思路吧,肯定可以的。
若不阻止冒泡行为,那么你都可以在body上绑定。
比如:
  1. document.body.addEventListener('click',function(){
  2.   var targetEle=e.target;
  3.   if(targetEle.nodeName.toLowerCase()==='li'){
  4.     alert('you click list item elements');
  5.   }
  6. },false)
复制代码
以上是个示例,可以完善更好的上下文环境,以及检测条件。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-3-19 11:07:58 | 显示全部楼层
  1. <li data-url="google">
  2.         <h3>javascript<small>(23)</small></h3>
  3.         <p><strong>script</strong>:javascript,go.</p>
  4. </li>
复制代码
一般情况下通过遍历<li>然后获取<li>的data-url属性值后进行页面跳转,比如到http://www.google.com
现在不想遍历<li>,想直接点击<li>里面的任何元素都跳转到http://www.google.com
回复 支持 反对

使用道具 举报

发表于 2014-3-19 12:07:06 | 显示全部楼层
mycggo 发表于 2014-3-19 11:07
一般情况下通过遍历然后获取的data-url属性值后进行页面跳转,比如到http://www.google.com。
现在不想遍 ...

e.target.parentElement
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-3-19 17:54:57 | 显示全部楼层

谢谢回复,采用parentNode的话,估计需要用到while循环,不知道这个和遍历<li>哪个性能更好一些。
回复 支持 反对

使用道具 举报

发表于 2014-3-19 18:44:58 | 显示全部楼层
mycggo 发表于 2014-3-19 17:54
谢谢回复,采用parentNode的话,估计需要用到while循环,不知道这个和遍历哪个性能更好一些。

我回复的是parentElement,而不是parentNode,这样直接作用的是标签。
当然,不排除你在li中嵌套更多的层,这个循环没办法啦。
这里应当是事件的效率才是效率问题吧,循环不算啥了。
回复 支持 反对

使用道具 举报

发表于 2014-3-20 09:38:14 | 显示全部楼层
本帖最后由 xmlovedoudou 于 2014-3-20 11:15 编辑
mycggo 发表于 2014-3-19 17:54
谢谢回复,采用parentNode的话,估计需要用到while循环,不知道这个和遍历哪个性能更好一些。

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-3-20 11:54:16 | 显示全部楼层
xmlovedoudou 发表于 2014-3-20 09:38
[html]var listItems=document.querySelectorAll('li');
[].slice.call(listItems).forEach(function(ele, ...

谢谢,我再研究研究。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备19000417号-2 )

GMT+8, 2021-4-20 12:37 , Processed in 0.059118 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表