動態資料的建立與繫結

在實際的開發中，我們常常需要通過動態載入資料，來建立頁面的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核心的瀏覽器有一些特殊的屬性，在處理相容的時候，還是需要多多瞭解^-^