AMP - Install multiple event handlers for tap

Question

Is there a way to install multiple events for tap? E.g. on tap close the sidebar and open a lightbox?

Thanks.

Pia

amp.dev/documentation/guides-and-tutorials/learn/… – Melpomene

Answer 1

Handling multiple events You can listen to multiple events on an element by separating the events with a semicolon ;.

Example: on="submit-success:lightbox1;submit-error:lightbox2"

Multiple actions for one event You can execute multiple actions in sequence for the same event by separating the actions with a comma ','.

Example: on="tap:target1.actionA,target2.actionB"

Thorne

Multiple actions for the same event doesn't work for me. :( (amp-bind-0.1) – Restless

Answer 2

There doesn't appear to be a way to chain actions.

You could try;

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

Or

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

Improvement

Neither of them has worked for me.... Is there actually some other solution for this issue? – Belabor

Answer 3

The use of semicolons makes this possible.

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

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

P.S.: I'm not sure if it works on the same event twice. But it works with different ones like tap:action;change:action

Brauer

Oh boy, sorry this is a duplicate from the best answer – which I did not see when I was looking this up. Right Answer from Toby – Brauer

Answer 4

I got this to work using one on attribute just fine:

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

Ferromanganese

concatenation of events for the same element works well, but the question is if diffrent elements may be target with an tap event. – Belabor

@ChristianFelix It's been a while since I worked in Amp or looked at the code where I did this, but I think this was for two different elements (lightbox-1 and lightbox-2). – Ferromanganese

Answer 5

You can listen to multiple events on an element by separating the events with a semicolon ;.

Example: on="submit-success:lightbox1;submit-error:lightbox2"

Bushy

Answer 6

It works for me:

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

Fitly

Answer 7

To trigger multiple componets with tap on a single component, you need to separate componentX.action parts with commas. Here ans16 and explanation16 are two components to be shown or hidden after tapping.

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

Check here for a working amp page. It also uses role and tabindex attributes which are required to qualify for a Google AMP page indexing.

Racketeer

Can you elaborate on the tabindex requirement for a 'Google AMP page indexing'? I can't find any info on it, thanks. – Wieren

Google search console reports errors for missing these tags. I do not have exact documentation. – Racketeer