互動基礎

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

本指南概述了 AMP 的互動基礎。某些基本概念對於其他框架來說可能很熟悉，例如隱藏和顯示元素，但 AMP 也公開了特定的動作和事件。請繼續閱讀以了解如何安裝監聽器、回應使用者互動，並將互動性的基礎知識帶入您的頁面中。

事件監聽器和事件處理

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

你好，AMP 世界！

 <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。

你好，AMP 世界！

  <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 有六個全域定義的動作

隱藏
顯示
切換可見性
toggleClass()
scrollTo()
focus

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

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

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

隱藏
顯示
切換可見性

<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 貢獻

互動基礎

事件監聽器和事件處理

你好，AMP 世界！

AMP 事件

AMP 動作

你好，AMP 世界！

再見，AMP 世界！

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

在頁面載入時隱藏元素

新增、移除和切換 CSS 類別