事件委托的应用及其兼容

最近在项目中遇到一个问题:

优惠券通过异步调用后台接口生成,其中有一个点击交互,点击查看详情会出现优惠券详情,内容如下

默认情况
点击展开后是这样

乍一看简直so easy,直接给这个dom绑定一个点击事件就ok了,

$(".act-body-body").click(function(){

      $(this).toggleClass('show').parents('.act-body').next().slideToggle();

})

呵呵,so naive,意料之外又情理之中地失效了,懵逼了一会才反应过来,绑定点击事件在优惠券渲染之前进行了,导致这个绑定失效。

而目前的项目也没有用vue等一系列框架来维护,完全是原生js+少量jq,思量一番后我决定用事件委托来实现这个功能。



事件委托是什么意思呢?JavaScript高级程序设计上讲:

事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

也就是说,我们可以利用事件委托这个特性来绑定target的父级事件,通过父级点击事件的冒泡特性来触发到目标元素的点击事件。

所以我直接把点击事件绑定到了document,通过document来委托代理这个点击事件:

$(".document").on('click','.act-body-body',function () {

     $(this).toggleClass('show').parents('.act-body').next().slideToggle();

});

结果在网页测试没有问题,但在用ios手机测试打开仍然失效,后来经过排查,发现ios系统使用事件委托时,必须要绑定在其直接父级上,否则不会生效,因此我把ducument改为其直接父级,这个问题完美解决。

比较有代表性的兼容性问题,记录一下。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。