IOS下动态加载数据点击事件失效

---

动态数据的创建与绑定

在实际的开发中，我们常常需要通过动态加载数据，来创建页面的DOM，而且给这些新增的元素添加事件也是不可避免的。

而对于动态数据的事件绑定，就需要明白两个概念，就是目标元素和代理元素（委托元素）；

（1）目标元素：动态创建的元素，最终click事件需要绑定到该元素

（2）代理元素：动态创建的元素的父级元素，即非动态创建的父元素，比如我们习惯上使用document,body等，但这不是唯一的。

---

BUG描述

如果【目标元素】是可点击的（比如 button、a 标签），此时click事件还是有效的。

如果【代理元素】是document或body，并且【目标元素】是默认不可点击的（如 div, span 等），此时IOS系统上的click事件会失效，无法触发事件；

// 这里使用jQuery
$(document).on('click', 'li', function(){
    console.log('点击了li标签');
    })

• 原因

因为IOS认定只有可点击的DOM对象才可以触发点击事件，比如<a>和<button>标签，对于非点击对象，需要将其变为可点击对象；

---

解决方案

（1）将 click 事件直接绑定到目标元素(即 .target ) 上

不能用于动态加载的DOM元素

$('.target').click(function(){
    console.log("点击目标元素");
})

（2）将目标元素换成 <a> 或者 <button> 等可点击的元素，

但是需要去除按压效果：
-webkit-tap-highlight-color: transparent;

（3）给目标元素添加一个空的点击事件： onclick=""

不推荐使用这种行内js的方法

<div class="target" onclick=""><span>点击我!</span></div>

// 样式
.target span {
  pointer-events: none;//禁用元素上绑定的事件
}

（4）把 click 改成 touchend 或 touchstart

注意：需要加上preventDefault 或 return false 来阻止事件冒泡

（5）将 click 元素委托到非 document 或 body 的父级元素上;

注意：委托的元素不可以是动态加载的DOM元素；

（6）给目标元素加一条样式规则：

.target{
    cursor: pointer;    //定义鼠标指针悬浮在元素上方显示的鼠标光标
    -webkit-tap-highlight-color: transparent;//去除按压效果
}

最后，webkit内核的浏览器有一些特殊的属性，在处理兼容的时候，还是需要多多了解^-^