一个div在另一个里面，两个都可以点击。当按下内部按钮时，外部按钮也被触发

Question

我想要实现的是这样的:我有一些div (准确地说，像Reddit这样的博客帖子)，我希望这个div是整个可点击的。它有很多数据，像作者，发布的时间，内容，img等。但在底部是一个保存按钮，允许用户保存它供以后使用。但当我点击保存按钮时，它也会触发帖子的单击，导致用户被重定向到帖子的详细页面。我不想那样做。我只想触发保存按钮。情况图：

​

​

我所拥有的是：

<div onclick="location.href='/post/{{ post.id }}/';" style="cursor: pointer; ">
    <article class="media post">
        <div class="media-body">

            <!-- Whole body, user, date, content, img etc. -->

            <div>
                <a id="save-post-{{post.id}}" href="javascript:void(0);"
                    onclick="save_post('{{post.pk}}', '{{user.pk}}', this.id, '{{ csrf_token }}');">
                    Save
                </a>
            </div>
        </div>
    </article>
</div>

save-post是AJAX函数，它将数据发送到Django服务器。

我该怎么做，保存按钮只会被触发？

Answer 1

只需像这样重新排列您的htm

<div>
<article class="media post">
    <div class="media-body"  onclick="location.href='/post/{{ post.id }}/';" style="cursor: pointer; ">

        <!-- Whole body, user, date, content, img etc. -->


    </div>
    <div>
            <a id="save-post-{{post.id}}" href="javascript:void(0);"
                onclick="save_post('{{post.pk}}', '{{user.pk}}', this.id, '{{ csrf_token }}');">
                Save
            </a>
        </div>
</article>

 </div>