欢迎您, 来到 宁时修博客.^_^

Jquery 事件委托在andriod正常在ios失效的解决方案

2018/10/13 宁时修 Jquery,javascript 382
jquery.js事件委派在手机端失效的解决方案

最近做一个项目,h5开发手机应用,其中有个页面,因为dom结构都是动态追加,直接绑定事件失效,所以将事件委托给了document元素,具体绑定情况如下:

 $(document).on('click',".item-name",function(e){ ***})

我的结构式<div>按钮</div>

web测试和安卓测试都正常,但是在IOS端缺失效了,查了一下资料才知道原来是标签语义化的原因:

根据H5新定义,默认可点击的元素有a标签和button标签,也就是给这两种标签进行事件委托是完全没有问题的。


由此解决的办法有

第一种:换dom结构完全按照语意规定,点击元素使用button,超链使用a标签

第二种:把document换成selector的父元素,前提是父元素不是由JS生成的。

第三种:解决的方法很巧妙,就是给需要绑定事件的元素添加一个css cursor: pointer 。

exp:

selector {
   cursor:pointer;
}

推荐使用第三种方法,灵活,好控制。需要注意的是,cursor属性是可继承的,如果点击元素还有子元素,而且需禁用事件,记得将cursor属性值设置为default

点赞
说说你的看法

所有评论: (0)