Make clickable <div> with links inside, how to fire just one action?

Question

I have a <div> in my code which I made clickable. When the <div> gets clicked the height and text expand using the jQuery function $(div).animate(); . This works as I want to, but I am still experiencing one small problem.

In this there are several links. Those links all redirect to another page. when one of the links get clicked, the div still animates, if load times are a bit slow you see the full animation and then you go to the page of the link. This is not what it has to do. If a link iside the div gets clicked, the animation doesn't need to be fired because the user will be redirected. only when the div itself (not a link inside it) gets clicked, then the animation should fire.

Any idea how I can achieve this? Is this doable via use of Z-index?

This is how my div looks:

<div class="question-summary collapsed unselectable">
        <div class="votes">

            <div class="mini-counts">@item.GetTotalVotes()</div>
            <div>Votes</div>
        </div>

        @if (item.Answers.Count == 0)
        {
            <div class="votes unanswered">
                <div class="mini-counts">@Html.DisplayFor(modelItem => item.Answers.Count)</div>
                <span>Answers</span>
            </div>
        }
        else
        {


           <div class="votes answered">
               <div class="mini-counts">@Html.DisplayFor(modelItem => item.Answers.Count)     </div>
               @if (item.Answers.Count == 1)
               {
                   <span>Answer</span>
               }
               else
               {
                   <span>Answers</span>
               }
           </div>
        }
        <div class="summary">

            <h3 class="link-ontop">@Html.ActionLink(@item.GeneralQuestion, "Details", new { id = item.QuestionId})</h3>
            <p class="extra-info">@item.GetShortExplanation(160) <span class="link-ontop">@Html.ActionLink("Read More...", "Details", new { id = item.QuestionId})</span></p>

            <div class="meta-info">

                @item.DateSubmitted.ToShortDateString()
                @Html.DisplayFor(itemModel => item.Author.FirstName)
            </div>
        </div>

        <div class="tags">
            @foreach (var topic in item.Topics)
            {
                <a href="@Url.Action("IndexByTopic","Question",new { topicId = @topic.TopicId })" class="tag-name">@topic.Name</a>
            }
        </div>

        <div class="no-animate">
            <h1>@item.GeneralQuestion</h1>
            @Html.DisplayWithBreaks(item.Explanation)
            <br />
            <br />

            <a href="@Url.Action("Details", new { id = item.QuestionId })">This question has @item.Answers.Count answers, click here for details!</a>
        </div>
    </div>

This is used in an MVC.NET project, that's why there's Razor syntax in the html code.

Answer 1

use .stopPropagation(); to stop the event bubling:

$('div a').on('click', function(e){
    e.stopPropagation();
});

---

As you have bound an event to div so if you click any child element of the div then event tend to bubble up to the dom tree, that is why your div gets the click event to fire its animate function.

event.stopPropagation(); is used to stop bubbling the event to the dom tree. so with the above click event you can stop the event to bubble up to its parent which has the animate function bound to it.