AMP - 安装多个事件处理程序以进行点击

Question

有没有办法为tap设置多个事件？例如。点按侧边栏并打开灯箱？

感谢。

Answer 1

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

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

一项活动的多项操作 您可以通过用逗号分隔操作来按顺序为同一事件执行多个操作。

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

Answer 2

似乎并不是一种连锁行动的方式。

你可以试试;

<button on="tap:my-lb.open" on="tap:sidebar1.close">test</button>

或者

<button on="tap:my-lb.open,sidebar1.close">test</button>

Answer 3

使用分号可以实现这一点。

<button on="tap:my-lb.open;tap:sidebar1.close">test</button>

https://www.ampproject.org/docs/fundamentals/spec#on

P.S .：我不确定它是否在同一事件上两次起作用。但是它可以与tap:action;change:action

Answer 4

我使用一个on属性就可以了：

<button on="tap:lightbox-1.close,lightbox-2">Next</button>

Answer 5

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

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

Answer 6

它对我有用：

on="tap:my-lightbox,sidebar.close"

Answer 7

要通过单击单个组件来触发多个组件，需要用逗号分隔componentX.action组件。 ans16 和 explanation16 是点击后要显示或隐藏的两个组件。

<div on="tap:ans16.toggleVisibility,explanation16.toggleVisibility" role="button" tabindex="16">Answer[=]</div>
<div id="ans16" hidden>D</div>
<div id="explanation16" hidden>Explanation: </div>

在here上查看有效的放大器页面。它还使用符合条件进行Google AMP页面索引所需的角色和tabindex属性。