单击子ul中的链接时，防止执行父li事件

Question

如果我有一个列表（Let's say I am not able to draw it using paths），其中：

• 将单击侦听器添加到包含子列表的所有<li>节点
• 每个子列表的<li>节点都包含一个链接

点击后如何让这些链接正常运行？请注意，尽管在我的示例中链接节点是父列表的第一个子节点，但我还想考虑可能不是这种情况的示例。

我只使用纯JS，没有JQuery 。

我可以想到2个解决方案，每个解决方案都有不同的潜在用例：

1. 检查事件目标或相关节点是否符合特定条件（JSFiddle）。
2. 从父级移除事件侦听器，稍后重新挂接（JSFiddle）。

还有其他方法可以实现同样的目标吗？假设一个用例可以使用任何方法，那么一个方法是否优于另一个方法（从表面看，第一个例子看起来更清晰）？