使可點擊 <div> 與內部鏈接，如何僅觸發一個動作？

Question

我的代碼中有一個<div> ，使我可以點擊。 單擊<div>時，使用jQuery函數$(div).animate();擴展高度和文本$(div).animate(); 。 這可以按我的意願工作，但是我仍然遇到一個小問題。

在此有幾個鏈接。 這些鏈接都重定向到另一個頁面。 單擊其中一個鏈接時，div仍會設置動畫，如果加載時間有點慢，您會看到完整的動畫，然后轉到鏈接頁面。 這不是必須要做的。 如果單擊div的鏈接，則無需觸發動畫，因為將重定向用戶。 僅當單擊div本身（而不是其中的鏈接）時，才應觸發動畫。

知道我該如何實現嗎？ 通過使用Z-index可以做到嗎？

這是我的div的外觀：

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

這在MVC.NET項目中使用，這就是為什么html代碼中包含Razor語法的原因。

Answer 1

使用.stopPropagation(); 停止事件冒泡：

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

---

由於已將事件綁定到div，因此，如果單擊div的任何子元素，則事件往往會冒泡至dom樹，這就是為什么div會獲得click事件以觸發其動畫功能的原因。

event.stopPropagation(); 用於停止將事件冒泡到dom樹。 因此，使用上述click事件，您可以停止事件使其冒泡到綁定了動畫功能的父事件。