交互性基础

本指南概述了 AMP 中的交互性基础。一些基本内容与其他框架类似，例如隐藏和显示元素，但 AMP 还会公开特定操作和事件。继续阅读以了解如何安装侦听器、响应用户交互，以及将交互性基础引入您的页面。

事件侦听器和事件处理

AMP 通过 on 属性在元素上安装事件侦听器，其中事件和响应操作作为值。事件允许您侦听和响应组件特定的用户交互。在下面的示例中，当用户单击按钮时，<h1> 元素会隐藏。tap 事件触发 hide 操作。

你好，AMP 世界！

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

在游乐场中打开此代码段

事件侦听器和操作在 AMP 中遵循特定语法

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

侦听事件的注册。在 AMP 中始终为 on。
事件名称，后跟冒号。上面的示例使用 tap。
要执行操作的目标元素的 ID，或特殊目标，后跟句点。上面的示例指定了 <h1> 元素的 ID helloWorld。
所需的操作名称。上面的示例使用 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>

在游乐场中打开此代码段

tap 事件是 click 的 AMP 特定实现。全局定义的 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>

在游乐场中打开此代码段

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.org.cn/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.org.cn/static/samples/img/image2.jpg"
           alt="Photo of a sweet cupcakes"></amp-img>

在游乐场中打开此代码段

要通过 show 操作显示元素，必须先使用 hidden 属性或从 hide 或 toggleVisibility 操作将其隐藏。show 操作不支持被 CSS display:none 或 AMP 的 layout=nodisplay 隐藏的元素。

在页面加载时隐藏元素

通过应用 hidden 属性，指定在页面加载时对用户不可见的元素。

可见

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

在游乐场中打开此代码段

添加、删除和切换 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>

在游乐场中打开此代码段

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>

在游乐场中打开此代码段

在触发 CSS 动画和过渡中阅读更多内容。

由 @CrystalOnScript 撰写
由 @sbenz 提供帮助

交互性基础

事件侦听器和事件处理

你好，AMP 世界！

AMP 事件

AMP 操作

你好，AMP 世界！

再见 AMP 世界！

隐藏、显示和切换元素可见性

在页面加载时隐藏元素

添加、删除和切换 CSS 类