事件穿透原理

要理解事件雙重觸發(fā)先要明白什么是事件穿透，所謂事件穿透就是利用click事件在移動(dòng)設(shè)備上觸發(fā)有300ms左右延遲的特性，我們可以在touchstart事件中快速移除當(dāng)前層元素，讓事件短時(shí)間內(nèi)穿透到下層從而觸發(fā)下層的click動(dòng)畫，請(qǐng)參考下圖示意。

<!-- 事件穿透 -->
<svg style="height:0;">
  <rect>
    <animate 
      attributeName="opacity" 
      to="0" 
      begin="click" 
      dur="1s">
    </animate>
  </rect>
</svg>
<svg>
  <rect>
    <animate 
      attributeName="visibility" 
      to="hidden" 
      begin="touchstart" 
      dur="0.001ms">
    </animate>
  </rect>
</svg>

事件的雙重觸發(fā)

事件雙重觸發(fā)就是將開(kāi)和關(guān)2個(gè)狀態(tài)動(dòng)畫寫在一起，系統(tǒng)會(huì)根據(jù)事件選擇執(zhí)行其中之一，拿蘋果的圖文伸縮動(dòng)畫為例。

<svg>
  <!-- 伸長(zhǎng)動(dòng)畫 -->
  <animate 
    attributeName="width" 
    values="100%;100%;200%" 
    begin="touchstart" 
    fill="freeze" 
    dur="0.75s"
  ></animate>
  <!-- 返回動(dòng)畫 -->
  <animate 
    attributeName="width" 
    values="200%;100%;100%" 
    begin="click" 
    fill="freeze" 
    dur="0.75s"
  ></animate>
</svg>

當(dāng)我們將這2段開(kāi)關(guān)動(dòng)畫寫在一起時(shí)，我們會(huì)發(fā)現(xiàn)系統(tǒng)只選擇touchstart事件動(dòng)畫執(zhí)行而選擇性忽略了click事件動(dòng)畫，這是因?yàn)閠ouchstart沒(méi)有click事件的延遲，這就好比2個(gè)人前后腳到蛋糕店買蛋糕，而這時(shí)蛋糕店只剩下一塊蛋糕，老板自然是會(huì)給先到店的那個(gè)人。


在執(zhí)行了伸長(zhǎng)動(dòng)畫后，我們?cè)趺醋尫祷貏?dòng)畫執(zhí)行呢？這就要利用上面介紹過(guò)的事件穿透模型，我們要在當(dāng)前層之上制造一個(gè)擋板層，讓系統(tǒng)選擇click事件動(dòng)畫執(zhí)行而忽略touchstart動(dòng)畫。


還是拿剛才蛋糕店的例子，現(xiàn)在我們通過(guò)”事件穿透”這層朋友關(guān)系讓老板把蛋糕給晚進(jìn)店的那個(gè)人。

總結(jié)

通過(guò)事件雙重觸發(fā)可以實(shí)現(xiàn)一些狀態(tài)切換的開(kāi)關(guān)效果，如圖文的伸長(zhǎng)和返回，彈窗的彈出和關(guān)閉等，還是許愿哦要配合一些防誤觸和遮擋的技巧。