码迷,mamicode.com
首页 > Web开发 > 详细

Jquery事件委托之Safari

时间:2016-07-05 16:58:05      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:

什么是事件委托

事件委托是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 上,并且委托的元素是默认不可点击的(如 divspan 等),此时 click 事件会失效。

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

解决办法

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

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

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

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

 

Jquery事件委托之Safari

标签:

原文地址:http://www.cnblogs.com/jesse007/p/5644110.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!