互動性基礎

重要事項：此文件不適用於您目前選取的格式故事！

本指南概述 AMP 的互動性基礎。有些基本概念會與其他框架類似，例如隱藏和顯示元素，但 AMP 也公開了特定的動作和事件。請繼續閱讀以瞭解如何安裝監聽器、回應使用者互動，以及將互動性的基本概念帶入您的頁面。

事件監聽器與事件處理

AMP 透過 on 屬性，以事件和回應動作作為值，在元素上安裝事件監聽器。事件可讓您監聽元件特定的使用者互動並做出反應。在以下範例中，當使用者點擊按鈕時，<h1> 元素會隱藏。tap 事件觸發 hide 動作。

Hello AMP World!

 <h1 id="helloWorld">Hello AMP World!</h1>
<button on="tap:helloWorld.hide">
  Goodbye World
</button>

在 playground 中開啟此程式碼片段

事件監聽器和動作在 AMP 中遵循特定的語法

on="eventName:targetId.actionName(optionalParam='foo')"

監聽事件的註冊。在 AMP 中始終為 on。
事件名稱，後接冒號。上面的範例使用 tap。
目標元素的 ID，或要執行動作的特殊目標，後接句點。上面的範例指定了 helloWorld，即 <h1> 元素的 ID。
所需的動作名稱。上面的範例使用 hide。
您可以在單一元素上定義多個事件。下方的 AMP 事件章節概述了此語法。
您可以定義多個動作來回應單一動作。下方的 AMP 動作章節概述了此語法。

AMP 事件

透過將 on 屬性放置在所需的元素或 AMP 元件上，來註冊事件監聽器。

您可以在單一元素上註冊零個、一個或多個事件。透過在 on 屬性值內的宣告之間放置分號，來註冊多個事件。以下範例監聽 tap 事件和輸入特定的 change 事件，以顯示和隱藏隱藏的 <p> 元素。

<input on="tap:hiddenInstructions.show;change:hiddenInstructions.hide" tabindex=0 role="textbox" type="text">
<input type="submit" value="Submit">
<p hidden id="hiddenInstructions">
  Type your name!
</p>

在 playground 中開啟此程式碼片段

tap 事件是 AMP 特定的 click 實作。全域定義的 tap 事件適用於所有元素。您可以監聽HTML 元素特定的和 AMP 元件特定的事件。在參考頁面上尋找 AMP 元件特定的事件。

AMP 動作

AMP 透過執行定義的動作來回應事件。必須有指定的元素 ID 或特殊目標。您可以為每個事件註冊一個或多個動作。透過在每個 targetId.action 配對之間放置逗號，為單一事件註冊多個動作。

以下範例在單一 tap 事件觸發時隱藏 helloHeading 並顯示 goodbyeHeading。

Hello AMP World!

  <h1 id="helloHeading">Hello AMP World!</h1>
  <h1 id="goodbyeHeading" hidden>Goodbye AMP World!</h1>
  <button on="tap:helloHeading.hide,goodbyeHeading.show">
    Goodbye World
  </button>

在 playground 中開啟此程式碼片段

AMP 有六個全域定義的動作

hide
show
toggleVisibility
toggleClass()
scrollTo()
focus

您可以執行 HTML 元素特定的和 AMP 元件特定的動作。

隱藏、顯示和切換元素可見性

AMP 提供三個全域可用的動作來變更元素可見性。它們是

hide
show
toggleVisibility

<button on="tap:sweetImage.toggleVisibility,savoryImage.toggleVisibility">
    Toggle Sweet and Savory
  </button>
  <amp-img
           hidden
           id="savoryImage"  
           layout="responsive"
           width="300"
           height="200"
           src="https://amp.dev.org.tw/static/samples/img/image3.jpg"
           alt="Photo of savory sushi"></amp-img>
  <amp-img 
           id="sweetImage" 
           layout="responsive"
           width="300"
           height="200"
           src="https://amp.dev.org.tw/static/samples/img/image2.jpg"
           alt="Photo of a sweet cupcakes"></amp-img>

在 playground 中開啟此程式碼片段

若要透過 show 動作顯示元素，必須事先使用 hidden 屬性或從 hide 或 toggleVisibility 動作隱藏該元素。show 動作不支援透過 CSS display:none 或 AMP 的 layout=nodisplay 隱藏的元素。

在頁面載入時隱藏元素

透過套用 hidden 屬性，指定在頁面載入時不應對使用者顯示的元素。

可見

  <p>
    Visible
  </p>  
  <p hidden>
    Hidden
  </p>
  <p>
    Visible
  </p>

在 playground 中開啟此程式碼片段

新增、移除和切換 CSS 類別

常見的基本互動性需求是套用和移除 CSS 類別。全域定義的 toggleClass() AMP 動作滿足了此需求。您可以回應事件來新增、移除和切換 CSS 類別。

toggleClass() 動作需要一個引數，class="className"。這適用於套用和移除單一類別。

<head>
  <style amp-custom>
    h1 {
      margin: 1rem;
    }
    .border {
      border-style: dotted;
    }
  </style>
</head>
<body>
  <h1 id="borderHeading">Toggle my border!</h1>
  <button on="tap:borderHeading.toggleClass(class='border')">
    Toggle Border
  </button>
</body>

在 playground 中開啟此程式碼片段

toggleClass() 動作允許使用選用的額外引數 force。force 屬性接受布林值。當設定為 true 時，它允許在該切換期間新增定義的類別，但不移除。當設定為 false 時，它允許在該切換期間移除定義的類別，但不新增。此引數對於切換衝突的 CSS 屬性很有用，例如以下範例中的背景顏色

<head>
 <style amp-custom>
    h1 {
      margin: 1rem;
    }
    .green {
      background-color: green;
    }
    .red {
      background-color: red;
    }
    .border {
      border-style: dotted;
    }
  </style>
</head>
<body>
 <h1 id="togleHeading">Hello AMP World!</h1>
<button on="tap:togleHeading.toggleClass(class='red'),togleHeading.toggleClass(class='green', force=false)">
  Toggle Red
</button>
<button on="tap:togleHeading.toggleClass(class='green'),togleHeading.toggleClass(class='red', force=false)">
  Toggle Green
</button>
<button on="tap:togleHeading.toggleClass(class='border')">
  Toggle Border
</button>
</body>

在 playground 中開啟此程式碼片段

請在觸發 CSS 動畫和轉場效果中閱讀更多資訊。

作者： @CrystalOnScript
貢獻者： @sbenz