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

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

How do I do that, the save button is only triggered?

Answer 1

Just rearrange your htm a bit like this

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