js绑定事件代理的坑
2024-09-05 15:45:11
js通过事件代理的方式绑定跳转事件,我这里的逻辑是把click事件绑定在最外层container上面,如果e.target包含我已经写好的class,则执行跳转逻辑。但是这种方式好像只能是在点击的元素的上面,也就是最内层的元素上面有相应的class才能跳转,在外层加同样的class不生效,说明是我对于事件代理的理解不够深刻,其实事件代理的作用就是为了把目标元素的事件绑定在外层做代理,我想实现外层元素点击,固然不可生效。
这是原来的写法:
document.querySelector('.container').addEventListener('click', function (e) {
if(e.target.classList.contains('jumpUrl')){
console.log("点击jumpurl")
}
},false)
<div id="container" class="jumpUrl">
<div id="wrap">
<div id="s1" class="jumpUrl">s1
<div id="s2" class="jumpUrl">s2</div>
</div>
<div id="s3"></div>
</div>
</div>
如果既想要内层元素含有jumpUrl的 class时执行点击事件,又想要外层元素含有class时执行点击事件,修改优化如下:
document.querySelector('#container').addEventListener('click', function (e) {
console.log(e.currentTarget) //获得当前绑定监听事件的元素, container
console.log(e.target)//获得当前点击的元素
console.log(this) //等于e.currentTarget
if(e.currentTarget.classList.contains('jumpUrl')||e.target.classList.contains('jumpUrl')){
console.log("点击jumpurl")
}
},false)
document.getElementById("container").classList.add('jumpUrl');//写在后面也可以绑定成功
注意:内层元素,即点击的目标元素必须是点击时真正的目标元素,而不是外面一层;
currentTarget绑定相应想要点击的class的时候必须是做代理的即做事件监听的元素。这里是container
最新文章
- linux命令:du
- crontab使用
- POJ C++程序设计 编程题#4:魔兽世界之一:备战
- 命令行静态编译QT程序
- E: Sub-process /usr/bin/dpkg returned an error code (1)
- jquery返回顶部-ie6配合css表达式。
- 重新看php数组
- LINUX怎么修改IP地址
- -_-#【Canvas】绘制文本
- top -Hp pid 显示所有的线程
- document.body is null
- 用DirectShow实现视频采集-流程构建
- [P1441]砝码称重 (搜索+DP)
- XD308H设计超宽电压非隔离电源 MP150电源芯片
- Spring IoC中各个注解的理解和使用
- 用js制作简易计算器及猜随机数字游戏
- axios post提交数据格式不对的问题
- 经典SQL语句(转载)
- javaWeb上移下移(SpringMVC+Mabits+MySql)
- Android中经常使用的bitmap处理方法
热门文章
- 每日一题LeetCode 8. 字符串转换整数 (atoi)
- java基础(1):java概述、jdk的安装、环境变量的配置、helloworld案例
- css知识笔记:水平居中(别只看,请实操!!!)
- Java Web工程目录结构
- 【二】Gradle中的gradlew
- pymysql连接
- bay——安装_Oracle 12C-单实例-Centos7 -DG.txt
- 监控redis命令 - monitor
- GetPrivateProfileInt 使用方法
- poj 3253 Fence Repair 贪心 最小堆 题解《挑战程序设计竞赛》