| 标题 | jQuery事件委托之Safari |
| 内容 | 这篇文章主要介绍了jQuery事件委托之Safari 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下 什么是事件委托 事件委托是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>加载更多</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，希望对大家有所帮助 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。