CODEWITHSUNDEEP
amp-html
ASANIAN
ASANIAN

Reputation: 400

How to bind click event with amp-img

I get the following error on validation when binding onclick event with amp-img.

The attribute 'onclick' may not appear in tag 'amp-img'

Code works fine in browser but while validating amp pages it generates error. How to fix?

Upvotes: 1

Views: 1148

Answers (1)

sebil
sebil

Reputation: 246

onclick is a default html attribute to fire custom javascript, which is not allowed in amp.

You have to use the binding syntax of amp, which could look like this (last 4 lines):

<amp-img
    src="https://preview.amp.dev/static/samples/img/amp.jpg"
    width="1080"
    height="610"
    layout="responsive"
    alt="AMP"
    on="tap:AMP.setState({…})"
    tabindex="0"
    role="button">
</amp-img>

For onclick="…" it is on="tap:…" but there are also many other events you can use. Here is a list.

Don't forget to set tabindex and role attributes when you use tap events on custom elements. Otherwise you get new validation errors.

Upvotes: 5

Related Questions