如何将单击事件与amp-img绑定

Question

当将onclick事件与amp-img绑定时，我在验证时得到以下错误。

属性'onclick‘可能不会出现在标签'amp-img’中。

代码在浏览器中工作良好，但在验证和页时会产生错误。怎么修？

Answer 1

onclick是一个默认的html属性，用于激发自定义javascript，这在amp中是不允许的。

您必须使用amp的绑定语法，它可能如下所示(最后4行)：

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

对于onclick="…"，它是on="tap:…"，但也有许多其他事件可以使用。这是一个列表。

在自定义元素上使用tabindex事件时，不要忘记设置tap和role属性。否则，您将得到新的验证错误。