在<a></a> </button>内嵌套<button>

Question

我想嵌套一个执行<a>标记之间的Ajax操作的按钮。

整个容器应作为单独网页的链接，而“收藏夹”按钮将执行不相关的Ajax操作。遗憾的是，由于<button>无法嵌套在<a>代码中，因此无法完成此操作。

是否有一个简单的解决方法来达到这个效果？

当前代码：

<a class="button7" onmouseover="displayFavorite('000')" onmouseout="hideFavorite('000')" href='http://www.example.com">
    Math 141
    <button id='000' class="button8" onclick="favorite('000')">Favorite</button>
    <ul>
        <li><strong>Description</strong> Calculus 1 and Calulus 2</li>
        <li><strong>Instructor</strong> Boon Ong</li>
        <li><strong>Documents</strong> 17</li>
    </ul>
</a>

编辑：请注意，AJAX只是附加信息，与问题无关。

Answer 1

这样的事情：

<div class="container">
    <a class="button7" href="http://google.co.uk" onmouseover="displayFavorite('000')" onmouseout="hideFavorite('000')">
    Math 141

    <ul>
        <li><strong>Description</strong> Calculus 1 and Calulus 2</li>
        <li><strong>Instructor</strong> Boon Ong</li>
        <li><strong>Documents</strong> 17</li>
    </ul>
</a>
<button id='000' class="button8" onclick="favorite('000')">Favorite</button>
</div>

CSS：

.container {
    position:relative;
    width:400px;
}
.button7 {
    width:100%;
    height:auto;
    display:block;
    background:red;
}
.button8 {
    position:absolute;
    top:5px;
    right:5px;
}

使用position:relative;将元素绝对定位在父容器中，可以使用css属性top，left，right和bottom相对于包围它的容器。

将<a>（类.button7）设置为display:block;意味着超链接将充当块级元素并占据整个“块”（即提供给它的空间）由其父母）

http://jsfiddle.net/t29m4/

Answer 2

另一个选项的优点是只需要您进行一行更改，即防止单击事件传播到链接。您可以通过在点击按钮时调用 event.preventDefault() 来完成此操作。

<button id='000' class="button8" onclick="(e)=>{favorite('000'); e.preventDefault();}">Favorite</button>

不确定这种语法是否完全正确，或者这种方法是否遵循最佳实践，但似乎确实不错browser support for preventDefault

看起来这种方法是recommended on SO before