互动性基础

重要提示：此文档不适用于您当前选择的格式电子邮件！

本指南概述了 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 具有六个全局定义的操作

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>

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