javascript - 一个div内另一个div均可单击。 当按下内部时，外部也会触发(One div inside another, both clickable. When pressing the inner one, the outer is also triggered)

Question

what I would like to achieve is something like that: I have some div (a blog post to be precise, like Reddit) and I want this div to be whole clickable.(我想要实现的是这样的：我有一个div（准确的说是博客帖子，如Reddit），我希望这个div完全可点击。)

It has a lot of data, like the author, time posted, content, img, etc. But on the bottom is a save button which allows users to save it for later.(它包含许多数据，例如作者，发布的时间，内容，img等。但是在底部是一个保存按钮，允许用户保存以供以后使用。) But when I click the save button it also triggers the post's onlick what causes that user is redirected to the detail page of the post.(但是，当我单击“保存”按钮时，它还会触发帖子的点击状态，从而导致该用户被重定向到帖子的详细信息页面。) I do not want that.(我不要那个。) I only want to trigger the save button.(我只想触发保存按钮。) Image of the situation:(情况图片：)

What I do have is that:(我所拥有的是：)

<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 is the AJAX function, that sends data to the Django server.(save-post是AJAX函数，用于将数据发送到Django服务器。)

How do I do that, the save button is only triggered?(我该怎么做，仅触发保存按钮？)

  ask by northenofca translate from so

Answer 1

Just rearrange your htm a bit like this(只是这样重新整理您的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>