javascript - 制作带有链接的可点击 ，如何只触发一个 Action ？

Question

我有一个 <div>在我可以点击的代码中。当 <div>使用 jQuery 函数点击高度和文本扩展 $(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();
});

---

由于您已将事件绑定(bind)到 div，因此如果您单击 div 的任何子元素，则事件往往会向上冒泡到 dom 树，这就是为什么您的 div 获取点击事件以触发其动画功能的原因。

event.stopPropagation(); 用于停止将事件冒泡到dom树。因此，对于上面的点击事件，您可以停止事件冒泡到其绑定(bind)了动画功能的父级。