AMP

AMP 电子邮件中的操作和事件

重要提示:此文档不适用于您当前选择的格式 网站

本文档涵盖 AMP 电子邮件格式的操作和事件。阅读操作和事件,了解 AMP 网站、故事和广告。

on 属性用于在元素上安装事件处理程序。支持的事件取决于元素。

该语法的取值是一个简单的特定领域语言,形式如下

eventName:targetId[.methodName[(arg1=value, arg2=value)]]

请参阅下表,了解语法各部分的说明。

语法 必填? 描述
eventName 这是元素公开的事件的名称。
targetId 这是元素的 DOM ID,或者您希望响应事件执行操作的预定义特殊目标。在以下示例中,targetIdamp-lightbox 目标 photo-slides 的 DOM ID。
<amp-lightbox id="photo-slides"></amp-lightbox>
<button on="tap:photo-slides">Show Images</button>
methodName 这用于具有默认操作的元素。

这是目标元素(由 targetId 引用)公开的方法,并且您希望在触发事件时执行该方法。

AMP 有一个元素可以实现的默认操作的概念。因此,当省略 methodName 时,AMP 将执行该默认方法。

arg=value 某些操作(如果已记录)可能会接受参数。参数在 key=value 表示法中的括号之间定义。接受的值是
  • 简单的无引号字符串:simple-value
  • 带引号的字符串:"string value"'string value'
  • 布尔值:truefalse
  • 数字:111.1
  • 对事件数据的点语法引用:event.someDataVariableName

处理多个事件

您可以通过使用分号 ; 分隔事件来侦听元素上的多个事件。

示例:on="submit-success:lightbox1;submit-error:lightbox2"

一个事件的多个操作

您可以通过使用逗号“,”分隔操作来为同一事件按顺序执行多个操作。

示例:on="tap:target1.actionA,target2.actionB"

全局定义的事件和操作

AMP 在全局范围内定义了一个 tap 事件,您可以在任何 HTML 元素(包括 AMP 元素)上侦听该事件。

AMP 还全局定义了 hideshowtoggleVisibility 操作,您可以在任何 HTML 元素上触发这些操作。

只有当元素先前被 hidetoggleVisibility 操作隐藏,或者使用hidden 属性隐藏时,元素才能显示。 show 操作不支持通过 CSS display:none 或 AMP 的 layout=nodisplay 隐藏的元素。

例如,以下在 AMP 中是可行的

<div id="warning-message">Warning...</div>

<button on="tap:warning-message.hide">Cool, thanks!</button>

元素特定的事件

* - 所有元素

事件 描述
点击 在单击/点击元素时触发。

输入元素

事件 描述 元素 数据
更改 在元素的值发生更改并提交时触发。

数据属性与HTMLInputElementHTMLSelectElement中的属性相同。

输入
event.min
event.max
event.value
event.valueAsNumber
input[type="radio"],
input[type="checkbox"]
event.checked
选择
event.min
event.max
event.value
input-debounced 在元素的值发生更改时触发。这与标准 change 事件类似,但仅当输入值停止更改 300 毫秒后才会触发。 触发 input 事件的元素。 change 事件数据相同。
input-throttled 在元素的值发生更改时触发。这与标准 change 事件类似,但当输入的值发生更改时,它被限制为最多每 100 毫秒触发一次。 触发 input 事件的元素。 change 事件数据相同。

amp-accordion > section

事件 描述 数据
展开 在手风琴部分展开时触发。 无。
折叠 在手风琴部分折叠时触发。 无。

amp-carousel[type="slides"]

事件 描述 数据
slideChange 在轮播的当前幻灯片更改时触发。
// Slide number.
event.index

amp-lightbox

事件 描述 数据
lightboxOpen 在灯箱完全可见时触发。
lightboxClose 在灯箱完全关闭时触发。

amp-list

事件 描述 数据
fetch-error(低信任) 在获取数据失败时触发。

amp-selector

事件 描述 数据
选择 在选择或取消选择某个选项时触发。
// Target element's "option" attribute value.
event.targetOption

// Array of "option" attribute values of all selected elements.
event.selectedOptions

amp-sidebar

事件 描述 数据
sidebarOpen 在过渡结束后侧边栏完全打开时触发。
sidebarClose 在过渡结束后侧边栏完全关闭时触发。

amp-state

事件 描述 数据
fetch-error(低信任) 在获取数据失败时触发。

form

事件 描述 数据
提交 在提交表单时触发。
submit-success 在表单提交响应成功时触发。
// Response JSON.
event.response
submit-error 在表单提交响应为错误时触发。
// Response JSON.
event.response
有效 在表单有效时触发。
无效 在表单无效时触发。

元素特定的操作

*(所有元素)

操作 描述
隐藏 隐藏目标元素。
显示 显示目标元素。如果autofocus 元素因此变得可见,则它会获得焦点。
切换可见性 切换目标元素的可见性。如果autofocus 元素因此变得可见,则它会获得焦点。
toggleClass(class=STRING, force=BOOLEAN) 切换目标元素的类。force 是可选的,如果已定义,则它确保如果设置为 true,则只会添加类而不会删除类,并且如果设置为 false,则只会删除类而不会添加类。
toggleChecked(force=BOOLEAN) 切换目标元素的选中状态。force 是可选的,如果已定义,则它确保结果状态与 force 的值相同。
焦点 使目标元素获得焦点。要失去焦点,请在另一个元素(通常是父元素)上使用 focus。出于可访问性原因,我们强烈建议不要通过将焦点放在 body/documentElement 上来失去焦点。

amp-accordion

操作 描述
toggle(section=STRING) 切换 amp-accordion 部分的 expandedcollapsed 状态。当在没有参数的情况下调用时,它会切换手风琴的所有部分。通过提供部分 ID 在特定部分上触发:on="tap:myAccordion.toggle(section='section-id')"
expand(section=STRING) 展开手风琴的各个部分。如果某个部分已展开,则它将保持展开。当在没有参数的情况下调用时,它会展开手风琴的所有部分。通过提供部分 ID 在特定部分上触发:on="tap:myAccordion.expand(section='section-id')"
collapse(section=STRING) 折叠手风琴的各个部分。如果某个部分已折叠,则它将保持折叠。当在没有参数的情况下调用时,它会折叠手风琴的所有部分。通过提供部分 ID 在特定部分上触发:on="tap:myAccordion.collapse(section='section-id')"

amp-carousel[type="slides"]

操作 描述
goToSlide(index=INTEGER) 将轮播前进到指定的幻灯片索引。

amp-image-lightbox

操作 描述
打开(默认) 打开图像灯箱,源图像是触发该操作的图像。

amp-lightbox

操作 描述
打开(默认) 打开灯箱。
关闭 关闭灯箱。

amp-list

操作 描述
changeToLayoutContainer amp-list 的布局更新为 layout="CONTAINER",以允许动态调整大小
刷新 src 刷新数据并重新呈现列表。

amp-selector

操作 描述
清除 清除已定义的 amp-selector 中的所有选择。
selectUp(delta=INTEGER) delta 的值向上移动选择。默认的 delta 设置为 -1。如果没有选择任何选项,则选定状态将变为最后一个选项的值。
selectDown(delta=INTEGER) delta 的值向下移动选择。默认的 delta 设置为 1。如果没有选择任何选项,则选定状态将变为第一个选项的值。
toggle(index=INTEGER, value=BOOLEAN) 切换 `selected` 属性的应用。如果 select 属性不存在,此操作将添加它。如果 select 属性存在,此操作将删除它。您可以通过在 `value` 参数中包含布尔值来强制添加或删除。值为 `true` 将强制添加 `selected` 属性,如果该属性已存在,则不会删除它。值为 `false` 将删除该属性,但如果该属性不存在,则不会添加它。

amp-sidebar

操作 描述
打开(默认) 打开侧边栏。
关闭 关闭侧边栏。
toggle 切换侧边栏的状态。

form

操作 描述
清除 清除表单输入中的所有值。
提交 提交表单。

特殊目标

以下是 AMP 系统提供的具有特殊要求的目标

目标:AMP

AMP 目标由 AMP 运行时提供,并实现应用于整个文档的顶级操作。

操作 描述
setState({foo: 'bar'})1

需要 amp-bind

将对象字面量合并到可绑定的状态中。

1当与多个操作一起使用时,后续操作将等待 setState() 完成后才调用。每个事件只允许一个 setState()