jQuery大事托付之Safari_

1、jQuery大事托付之Safari_ 這篇文章主要介紹了jQuery大事托付之Safari 的相關(guān)資料,特別不錯，具有參考借鑒價值，需要的伴侶可以參考下 什么是大事托付 大事托付是Jquery中一種大事綁定的方式，不同于常見的大事綁定方式將大事綁定在目標(biāo)元素上，而是將大事綁定在父級元素上通過大事冒泡來執(zhí)行綁定函數(shù)。 /常見的大事綁定(Jquery) $(element).click(function() /do something ) /大事托付(Jquery) $(parents).on(click,element,function() /do something ) 大事托付的原理 大事托

2、付將大事監(jiān)聽綁定在目標(biāo)元素的父級上，當(dāng)目標(biāo)元素響應(yīng)大事時冒泡到綁定大事的父級上，進(jìn)行推斷該大事的目標(biāo)元素是否是傳入的元素，假如是就執(zhí)行傳入的函數(shù)。 /簡潔實現(xiàn)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);/傳入目標(biāo)元素 ,false); else this.addEventListener(ev,fn,false); document.on(click,function()console.log(

4、this),oClick); 沒有做任何的兼容以及其他處理，只是為了了解原理，大家有什么問題可以留言指出。 大事托付有什么用呢 說這么多東西，究竟大事托付有什么用呢？我認(rèn)為大事托付最大的好處在于，動態(tài)生成的元素還會保留原有的大事綁定。 /a點擊的時候，ul都會新增一個li，新增的li都有綁定大事 ul id=oUl lili /ul a id=addBtn href=javascript:void(0) target=_self新增li/a script /用法常用大事綁定實現(xiàn) $(#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 ) ) /先不說性能問題，這樣的實現(xiàn)美觀，符合規(guī)律嗎 /用法大事托付實現(xiàn) $(document).on(click,#oUl li,function()/這里托付元素是敏捷的，只要是父級就行，只是不是動態(tài)生成（動態(tài)生成就失去大事托付的意義了） /do something ) $(#addBtn).on(click,function() $(#oUl).append(li/li); ) /這樣的代碼

6、是不是簡潔多了，解決了重復(fù)綁定的問題 大事托付之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，于是到線上去找相關(guān)的代碼 a id=test target=_slef href=javascript:void(0)test/a script $(document).on(click,#test,function() /do something ) /script 在安卓和ios設(shè)備上測試，沒有任何問題，代碼都差不多啊，但是大家留意到?jīng)]，標(biāo)簽不一樣（html語義化多重要?。?，于是將p換成a，問題完善解決，最終去谷歌了一下。 ios的safari中當(dāng)用法托付給一個元素添加click大事時，假如大事是托付到 document 或 body 上，并且托付的元素是默認(rèn)不行點擊的（如 div, span 等），此時 click 大事會失效。 緣由很清晰了，safari中不行點擊元素的click大事不會冒泡到document和body上。 解決方法 1.將click大事挺直綁定到元素上（不用法大事托付） 2.需要綁定click大事的元素改成a或者button等可點擊元素 3