按钮在 <a> 元素内不起作用，被覆盖答案

【问题标题】：Button not working inside <a> element, gets overridden按钮在 <a> 元素内不起作用，被覆盖
【发布时间】：2016-06-15 21:08:03
【问题描述】：

每当我点击以下按钮时：

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

在<a>元素内部，同时打开#/app/appointment/{{item.id}}"页面和模态框。我只想打开模式，而不是新页面。我认为正在发生覆盖。如何解决这个问题？

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

【问题讨论】：

为什么你的按钮上有一个href？
带有 href 属性的按钮？链接中的按钮？这将如何运作？
你的 openInboxMessageModal() 方法中有什么？
创建这个效果：imgur.com/EC1YyN7
openInboxMessageModal() 看起来像这样：pastebin.com/bRq9Azzk

标签： angularjs html css ionic-framework

【解决方案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 SO 中的按钮无效标记

【讨论】：