Question

我有一个可点击的范围，里面有一个按钮。我希望跨度转到一个href，按钮转到另一个。这是我目前的代码：

<script>
function deleteAlbum(url) {
    var txt;
    var r = confirm("Do you really want to delete this album?");
    if (r == true) {
        window.location.href = url;
    } 
    document.getElementById("demo").innerHTML = txt;
}
</script>    

<a href='gallery.php?album=16022015NewTest'>
    <span class='album'>
        <p>New Test</p>
        <p>16/02/2015</p>
        <button class='delete' onClick=deleteAlbum('gallery.php?delete_album=16022015NewTest')>
            Delete Album
        </button>
    </span>
</a>

有人有什么想法吗？

Answer 1

你想阅读event bubbling - 答案中的quirksmode解释非常好。

以下是您的示例的一个可能修复：

<script>
function gotoAlbum(albumId) {
  window.location.href="gallery.php?album="+albumId;
}

function deleteAlbum(e, url) {
  var r = confirm("Do you really want to delete this album?");
  if (r == true) {
    window.location.href = url;
  } 
 e.stopPropagation();
}
</script>    


<span class='album' onClick="gotoAlbum('16022015NewTest');" >
  <p>New Test</p>
  <p>16/02/2015</p>
  <button class='delete' onClick="deleteAlbum(event, 'gallery.php?delete_album=16022015NewTest');">Delete Album</button>
</span>

除此之外：正如其他评论所提到的，锚内的按钮很奇怪 - 它不符合HTML5 - 请参阅this question

Answer 2

你没有。不要将<button>放在<a>内。

Answer 3

根据atmd的评论重新构建您的HTML：不要将button置于a 之内。要符合html，请使用属性值的引号：

<div class="album">
    <a href="gallery.php?album=16022015NewTest">
        <p>New Test</p>
        <p>16/02/2015</p>
    </a>
    <button class="delete" onClick="deleteAlbum('gallery.php?delete_album=16022015NewTest')">Delete Album</button>
</div>

因此a标记不包含button标记。不要在内联元素中包含块元素也是一个好主意。 span标记已更改为div标记。您也可以将p代码更改为span。然后html看起来像这样：

<div class="album">
    <a href="gallery.php?album=16022015NewTest">
        <span>New Test</span>
        <span>16/02/2015</span>
    </a>
    <button class="delete" onClick="deleteAlbum('gallery.php?delete_album=16022015NewTest')">Delete Album</button>
</div>

试图将按钮放入链接

3 个答案: