Question

我遇到一个简单的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>

Answer 1

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

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

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

为什么会这样做？

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

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

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

这是我写的一篇文章，以防您需要有关W3C event model的更多信息。

jQuery手风琴点击触发特定元素

1 个答案: