互動基礎

重要事項：本文件不適用於您目前選取的格式 電子郵件！

本指南概述 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 事件是 click 的 AMP 特定實作。全域定義的 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