0

我有一个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 将点击事件侦听器附加到任何具有类“.hotspot”的东西，这使得热点内的所有内容在点击时可见（“.hotspot_inner”和向下）。

再次单击带有“.hotspot”类的任何内容会使里面的所有内容再次不可见。

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

我试过 stopPropagation()，但无济于事。听说.live有这样的问题，但是因为热点是动态添加的，所以需要用到。

有任何想法吗？

4

3 回答 3

1

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

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

    })​

如果这是你想要的，请看这里：http: //jsfiddle.net/5JJEd/

于 2012-12-06T23:07:09.283 回答
1

检查 event.target。

    if (event.target.className === 'hotspot') {
        // do stuff
    }
于 2012-12-06T22:47:58.970 回答
1

调用stopPropagation()不起作用，因为事件已经传播；这就是“实时”机制的工作原理。

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

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

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

于 2012-12-06T22:48:57.260 回答