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

问题描述

我想要实现的是这样的:我有一个div(准确的博客帖子，如Reddit)，并且我希望这个div完全可点击.它包含许多数据，例如作者，发布的时间，内容，img等.但是在底部是一个保存按钮，允许用户将其保存以备后用.但是，当我单击保存"按钮时，也会触发帖子的点击状态，这导致该用户被重定向到帖子的详细信息页面.我不要那个.我只想触发保存按钮.情况图片:

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:

我所拥有的是:

<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服务器.

save-post is the AJAX function, that sends data to the Django server.

我该怎么做，仅触发保存按钮?

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

推荐答案

只需重新排列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>

这篇关于一个div内另一个div均可单击.当按下内部时，外部也会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！