jQuery大事托付之Safari_

1、jQuery大事托付之Safari_ 这篇文章主要介绍了jQuery大事托付之Safari 的相关资料,特别不错，具有参考借鉴价值，需要的伴侣可以参考下 什么是大事托付 大事托付是Jquery中一种大事绑定的方式，不同于常见的大事绑定方式将大事绑定在目标元素上，而是将大事绑定在父级元素上通过大事冒泡来执行绑定函数。 /常见的大事绑定(Jquery) $(element).click(function() /do something ) /大事托付(Jquery) $(parents).on(click,element,function() /do something ) 大事托付的原理 大事托

2、付将大事监听绑定在目标元素的父级上，当目标元素响应大事时冒泡到绑定大事的父级上，进行推断该大事的目标元素是否是传入的元素，假如是就执行传入的函数。 /简洁实现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); Ototype.on=function(ev,fn,o

3、bj) var sClass=Ototype.toString.call(obj); if(obj|sClass.indexOf(HTML)=-1)/假装推断一下是否需要大事托付 this.addEventListener(ev,function(e) var e=e|window.event; if(e.target=obje.type=ev) fn.call(e.target);/传入目标元素 ,false); else this.addEventListener(ev,fn,false); document.on(click,function()console.log(

4、this),oClick); 没有做任何的兼容以及其他处理，只是为了了解原理，大家有什么问题可以留言指出。 大事托付有什么用呢 说这么多东西，究竟大事托付有什么用呢？我认为大事托付最大的好处在于，动态生成的元素还会保留原有的大事绑定。 /a点击的时候，ul都会新增一个li，新增的li都有绑定大事 ul id=oUl lili /ul a id=addBtn href=javascript:void(0) target=_self新增li/a script /用法常用大事绑定实现 $(#oUl).find(li).on(click,function() /do something ) $(#ad

5、dBtn).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); ) /这样的代码

6、是不是简洁多了，解决了重复绑定的问题 大事托付之Sarfari 一次项目中遇到的问题，click大事托付在移动端的safari上失效了 p class=loadmore加载更多/p script type=text/javascript $(document).on(click,.loadmore,function() alert(ok) ) /script 看上面的代码，很简洁吧，没什么问题吧，除了ios的safari，其他扫瞄器都能正常的弹出“ok”，一开头想到会不会是什么有地方把冒泡阻挡了，但是没有找到，jq的问题？，换了还是不行。正常的绑定（不用法大事托付）没问题，其他想到会不会是jq

7、的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