Question

我有一个DOM结构如下：

<div class="hotspot">
    <div class="hotspot_inner">
        <div class="hotspot_info">
            <div class="inner_box">
                <h2><%= hotspot.info.title %></h2>
                <p><%= hotspot.info.description.html_safe %></p>
            </div>
        </div>
    </div>
</div>

我还有一些CoffeeScript可以将点击事件监听器附加到类＆＃39; .hotspot＆＃39;这样可以使热点内的所有内容在点击时可见（＆＃39; .hotspot_inner＆＃39;及向下）。

使用＆＃39; .hotspot＆＃39;点击任何内容class再次使一切内部再次隐形。

问题是，单击热点内的任何内容也会触发附加到其父级的close事件。

我尝试过stopPropagation（），但无济于事。我听说.live有这样的问题，但由于热点是动态添加的，我需要使用它。

有什么想法吗？

Answer 1

检查event.target。

    if (event.target.className === 'hotspot') {
        // do stuff
    }

Answer 2

对stopPropagation()的调用不起作用，因为事件已经传播;这就是“实时”机制的运作方式。

你可以做的是在某个地方设置一个标志，也许是在事件对象本身。父处理程序可以检查它并知道它们不应该做任何事情。

或者，您可以检查事件目标，jQuery将其规范化为事件对象的“target”属性。如果父处理程序看到它们不是目标，则可以跳过该事件。这有时会变得棘手，具体取决于交互模式的性质和DOM的结构。

您可能有兴趣了解.live()已被弃用了几年。对于库的当前版本，您应该使用.on()，它结合了.bind()和.delegate()的功能。

Answer 3

我想你想要的是：当你点击.hotspot类时，你想要内部任何东西切换，如果你点击.hotspot_inner类（文本或其他）中的任何内容，你不想在.hotspot上触发click事件？如果是这种情况，你应该确保stopPropagation（）在.hotspot_inner点击事件中。

    $('.hotspot_inner').click(function(event){
        event.stopPropagation();

    })

如果您想要的话，请查看此处：http://jsfiddle.net/5JJEd/

阻止jQuery直播影响孩子

3 个答案: