javascript - 一个 div 位于另一个 div 中，两者都可点击。当按下内部按钮时，外部按钮也会被触发

Question

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

我所拥有的是:

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