交互基础
本指南概述了 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，或要执行操作的特殊目标，后跟一个点。上面的示例指定了
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>
tap 事件是 click 的 AMP 特定实现。全局定义的 tap 事件对所有元素都可用。您可以侦听HTML 元素特定的和 AMP 组件特定的事件。在参考页面上查找特定于 AMP 组件的事件。
AMP 操作
AMP 通过执行定义的操作来响应事件。必须指定元素 id 或特殊目标。您可以为每个事件注册一个或多个操作。通过在每个 targetId.action 配对之间放置逗号来为单个事件注册多个操作。
下面的示例在单个 tap 事件触发器上隐藏 helloHeading 并显示 goodbyeHeading。
你好，AMP 世界！
再见，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 有六个全局定义的操作
隐藏显示toggleVisibilitytoggleClass()scrollTo()focus
您可以执行 HTML 元素特定的和 AMP 组件特定的操作。
隐藏、显示和切换元素可见性
AMP 提供了三个全局可用的操作，用于更改元素的可见性。它们是
隐藏显示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 动画 & 过渡中阅读更多内容。
-
并由 @sbenz 贡献