防止父级触发jQuery事件

Question

我正在尝试通过单击

或旁边的内容来允许嵌套列表的折叠和展开。但是，选中复选框会导致容器

触发，从而导致父

折叠。

更容易理解的解释可以在这个例子中看到。

我通过设置一个全局变量来解决这个问题。

window.checkbox_checked = true

在这个fiddle中显示，但我不想使用全局变量。有更清晰的方法吗？我尝试使用event.stopImmediatePropagation()和event.stopPropagation()，但都没有对我起作用。

谢谢

更新

正如Felix King指出的那样，我的问题是将li包装在div中，这禁用了event.stopPropagation()解决方案

- david_adler

---

我尝试使用 event.stopImmediatePropagation() 和 event.stopPropagation()，但都没有起作用？也许你没有正确地使用它们？请发布相应的代码。 - Felix Kling

NVM，我刚刚看了你的HTML。它完全无效。div元素不能是ul元素的子元素。文本和input元素必须是li元素的子元素，而li元素必须是ul元素的子元素。然后stopPropagation应该按预期工作。 - Felix Kling

@FelixKling 是的，没错，但这样我就会失去格式！理想情况下，输入应该在左边。 - david_adler

很容易：http://jsfiddle.net/QwNYh/5/. - Felix Kling

@FelixKling 好样的！最佳解决方案。 - david_adler

Answer 1

只需在click handler中检查node name是否为UL，如果是，则跳过该特定的click event。

event.target.nodeName

代码：

$('li.expandable').on('click', function (e) {

if(e.target.nodeName !== "INPUT")
{
    //Code goes here.
}
});

演示

- Rajaprabhu Aravindasamy

---

当我选择任何一个“input”元素时，这不起作用。这就是OP的问题：“但是选中复选框会导致容器li触发，从而使父li折叠。” - Felix Kling

对不起，伙计，这对我也不起作用。 - david_adler

@david_adler :) 等一下，我正在查看。 - Rajaprabhu Aravindasamy

@RajaprabhuAravindasamy != 'INPUT' 可以工作，但会停止复选框被选中。 - david_adler

@david_adler 是的，它可以工作，我现在已经检查过了。你找到其他解决方法了吗？ - Rajaprabhu Aravindasamy

是的，请查看上面评论中Felix King的小提琴。 - david_adler