jQuery事件委托之Safari


Posted in Javascript onJuly 05, 2016

什么是事件委托

事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数。

//常见的事件绑定(Jquery)
$(element).click(function(){
//do something
})
//事件委托(Jquery)
$(parents).on("click",element,function(){
//do something
})

事件委托的原理

事件委托将事件监听绑定在目标元素的父级上,当目标元素响应事件时冒泡到绑定事件的父级上,进行判断该事件的目标元素是否是传入的元素,如果是就执行传入的函数。

//简单实现Jquery的事件委托
<ul id="oParent"></ul>
<a id="oClick" href="javascript:void(0)">click</a>
<script type="text/javascript">
var oParent=document.getElementById("oParent"),oClick=document.getElementById("oClick");
Object.prototype.on=function(ev,fn,obj){
var sClass=Object.prototype.toString.call(obj);
if(obj||sClass.indexOf("HTML")===-1){//假装判断一下是否需要事件委托
this.addEventListener(ev,function(e){
var e=e||window.event;
if(e.target===obj&&e.type===ev){
fn.call(e.target);//传入目标元素
}
},false);
}else{
this.addEventListener(ev,fn,false);
}
}
document.on("click",function(){console.log(this)},oClick);

没有做任何的兼容以及其他处理,只是为了了解原理,大家有什么问题可以留言指出。
事件委托有什么用呢

说这么多东西,到底事件委托有什么用呢?我认为事件委托最大的好处在于,动态生成的元素还会保留原有的事件绑定。

//a点击的时候,ul都会新增一个li,新增的li都有绑定事件
<ul id="oUl">
<li><li>
</ul>
<a id="addBtn" href="javascript:void(0)" target="_self">新增li</a>
<script>
//使用常用事件绑定实现
$("#oUl").find("li").on("click",function(){
//do something
})
$("#addBtn").on("click",function(){
$("#oUl").append("<li></li>");
$("#oUl").find("li").on("click",function(){
//do something
})
})
//先不说性能问题,这样的实现美观,符合逻辑吗
//使用事件委托实现
$("document").on("click","#oUl li",function(){//这里委托元素是灵活的,只要是父级就行,只是不是动态生成(动态生成就失去事件委托的意义了)
//do something
})
$("#addBtn").on("click",function(){
$("#oUl").append("<li></li>");
})
//这样的代码是不是简洁多了,解决了重复绑定的问题

今天的主题,事件委托之Sarfari

一次项目中遇到的问题,click事件委托在移动端的safari上失效了

<p class="loadmore">加载更多</p>
<script type="text/javascript">
$(document).on("click",".loadmore",function(){
alert("ok")
})
</script>

看上面的代码,很简单吧,没什么问题吧,除了ios的safari,其他浏览器都能正常的弹出“ok”,一开始想到会不会是什么有地方把冒泡阻止了,但是没有找到,jq的问题?,换了还是不行。正常的绑定(不使用事件委托)没问题,其他想到会不会是jq的bug,如果是jq的bug,那么以前的项目也会有类似的bug,于是到线上去找相关的代码

<a id="test" target="_slef" href="javascript:void(0)">test</a>
<script>
$("document").on("click","#test",function(){
//do something
})
</script>

在安卓和ios设备上测试,没有任何问题,代码都差不多啊,但是大家注意到没,标签不一样(html语义化多重要啊),于是将p换成a,问题完美解决,最后去谷歌了一下。

ios的safari中当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效。

原因很清楚了,safari中不可点击元素的click事件不会冒泡到document和body上。

解决办法

1.将click事件直接绑定到元素上(不使用事件委托)

2.需要绑定click事件的元素改成<a>或者<button>等可点击元素

3.将click事件委托到非doucument或body的父级元素上

4.给目标元素添加一条css样式 cursor:pointer(推荐这种,方便省事)

以上所述是小编给大家介绍的jQuery事件委托之Safari,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
js实现jquery的offset()方法实例
Jan 10 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
Jquery-data的三种用法
Apr 18 jQuery
JavaScript数据类型的存储方法详解
Aug 25 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 #Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 #Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 #Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 #Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 #Javascript
Node.js实现文件上传
Jul 05 #Javascript
JavaScript数组方法大全(推荐)
Jul 05 #Javascript
You might like
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
linux下编译安装memcached服务
2014/08/03 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
django连接mysql配置方法总结(推荐)
2018/08/18 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
python圣诞树编写实例详解
2020/02/13 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
Python创建自己的加密货币的示例
2021/03/01 Python
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
建筑设计师岗位职责
2013/11/18 职场文书
员工工作表现评语
2014/04/26 职场文书
党委班子对照检查材料
2014/08/19 职场文书
员工趣味活动方案
2014/08/27 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python