IOS下事件委托失效的问题

一、使用场景

一些模板渲染等情况下，需要用到事件委托，比如给动态创建的DOM绑定click事件，这里就需要事件委托

$('body').on('click','.span_target',function(){
    //TODO
});

(这里就牵扯到：目标元素和代理元素)
目标元素：动态创建的元素，最终click事件需要绑定到该元素
代理元素：动态创建的元素的父级元素，或者document,body等。

二、BUG情况

当使用事件委托给【目标元素】添加 click 事件时，如果【代理元素】是 document或body，并且【目标元素】是默认不可点击的（如 div, span 等），此时click事件会失效。
如果【目标元素】是可点击的（比如 button、a 标签），此时click事件还是有效的。
如果是a标签，没有设置href，那么点击事件也会失效。

<a href="javascript:void(0);" ><a>

三、解决方案3种

1、【代理元素】可以是【目标元素】的父级元素，document，body等，但【目标元素】必须为a或者button可点击的标签。

尽量使用touch事件或者tap事件，如果你需要click事件的延迟效果来达到某些交互，尽量把click事件绑定在a或者button可点击的标签上。

2、【代理元素】必须是【目标元素】的非document，body父级元素，【目标元素】可以是任意标签。

将click事件委托到非document或body的父级元素上。

3、【代理元素】可以是【目标元素】的父级元素，document，body等，【目标元素】可以是任意标签，但是要设置cursor: pointer;。

出现上述点击事件失效的问题，让我们不得不体会到标签语义化的重要性，于是这里建议大家写代码时，【目标元素】多用a或者button可点击的标签，【代理元素】多用非document，body父级元素。