互动基础

重要提示：此文档不适用于您当前选择的格式故事！

本指南概述了 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 事件是 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>

在 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.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>

在 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 类