Question

Whenever I click on the following button:

<button class="button button-small button-positive" ng-click="openInboxMessageModal()" href="#">
        Message
</button>

inside the <a> element, it opens up #/app/appointment/{{item.id}}" page and the modal at the same time. I only want to open up the modal, and not the new page. I think an override is taking place. How do fix this?

<a class="item item-avatar item-icon-right" ng-href="#/app/appointment/{{item.id}}" ng-repeat="item in selectedAppointments | filter: { status: 'today' } | limitTo:3 | filter: query as today">
    <img ng-src="{{ item.photo }}">
    <h2>{{ item.name }}</h2>
    <p>{ item.time } &bull; {{ item.service }}</p>
    <i class="icon ion-chevron-right icon-accessory"></i> 
    <div style="padding-top: 0.5em">
        <button class="button button-small button-positive" ng-click="openInboxMessageModal()" href="#">
            Message
        </button>
    </div>
</a>

Answer 1

https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element

只要在其中没有交互式内容（例如按钮或其他链接），a元素可以围绕整个段落，列表，表格等，甚至整个部分。 ref：w3.org/TR/html5/text-level-semantics.html#the-a-element所以那里的按钮是无效标记

按钮在<a> element, gets overridden

1 个答案: