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();
});

因为你已经将一个事件绑定到div所以如果你点击div的任何子元素，那么事件往往会冒泡到dom树，这就是为什么你的div获取click事件来激活它的动画函数。

event.stopPropagation();用于阻止将事件冒泡到dom树。因此，使用上面的单击事件，您可以停止事件冒泡到其父级，该父级具有绑定到它的动画功能。

使用里面的链接制作可点击的<div>，如何只触发一个动作？</div>

1 个答案: