AMP-html 如何防止用户单击输入时关闭灯箱

Question

我有一个 amp-lightbox 和一个表格。

 <amp-lightbox id="search-word"
                  layout="nodisplay">
        <div class="lightbox"
             on="tap:search-word.close"
             role="button"
             tabindex="0">
            
            <form id="search-word" role="search" action="https://localanagrammer.com/" target="_top">
                <div class="input-group">
                    <input type="text" id="searchWord" class="form-control" placeholder="enter scrabble word" data-ng-model="keyword" autocomplete="off" autofocus>
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" data-ng-click="doSearch(keyword)">
                            <span class="fa fa-search" aria-hidden="true"></span>
                        </button>
                    </span>
                </div>
            </form>
        </div>
    </amp-lightbox>

当我尝试单击文本输入时，灯箱正在关闭。

问题是:防止关闭的正确方法是什么？

Answer 1

我通过在内部元素中放置一个带有打开 Action 的水龙头来解决这个问题。这里类似的情况是(这是渲染 AMP html 的 React 代码):

        <amp-lightbox
            id="mylightbox"
            on="tap:mylightbox.close"
            class="dark-lightbox-background"
            layout="nodisplay">
            <div 
                class="container"
                on="tap:mylightbox.open">

                 <!-- content placed here -->

            </div>
        </amp-lightbox>