0

我对一个简单的 jQuery 手风琴脚本有疑问。我在此页面上使用它来列出一些事件：http ://www.melisayavas.com/kush-project/

我遇到的问题是当用户单击包装器内的任何位置时脚本会崩溃。仅当用户单击事件标题时，我才需要折叠脚本。

你可以看到这个有同样问题的 jsfiddle：http: //jsfiddle.net/mcDeE/

我正在使用的脚本的完整代码可以在这里找到：http: //pastebin.com/hJEufLQU

这是 HTML：

<div id="va-accordion" class="va-container" style="">
    <div class="va-wrapper">
        <div class="va-slice" style="opacity: 1;">
            <div class="va-title" style="">
                <h2>Relationship, 26 February 2013</h2>
            </div>
            <div class="va-content" style="display: block;">
                <div class="event-left"></div>
                <div class="event-right"></div>
            </div>
        </div>
        <div class="va-slice" style="opacity: 0.2;">
        <div class="va-slice" style="opacity: 0.2;">
    </div>
</div>
4

1 回答 1

1

我遇到的问题是当用户单击包装器内的任何位置时脚本会崩溃。仅当用户单击事件标题时，我才需要折叠脚本。

为了获得您想要的结果，您必须在事件传播到达手风琴根元素之前阻止它。您只需要在.va-content元素上发生单击时执行此操作。

$(function() {
    $('#va-accordion').vaccordion();
    $(".va-content").click(function(e) {
        e.stopPropagation();                    
    });
});

为什么这个工作？

事件从根元素传播到目标元素（捕获阶段），到达目标后，它们会爬回根元素（冒泡阶段）。目标元素是接收事件的元素。

可以在捕获阶段和冒泡阶段都注册事件侦听器。在这里，我们使用 jQuery 在冒泡阶段注册事件。

stopPropagation允许阻止通过 DOM 的事件传播。

那是我写的一篇文章，以防您需要有关W3C 事件模型的更多信息。

于 2012-12-01T18:12:05.343 回答