防止javascript在子元素上单击

好的，简单的问题：

<div onclick="javascript:manualToggle(this)">
    <span>Allowed to click</span>
    <span>Not allowed to click</span>
    <span>Allowed to click</span>
</div>

允许点击
不允许单击
允许点击

如果不将手动切换复制到允许单击的两个跨距上，如何防止“不允许单击”跨距在单击时触发其父div onclick事件？

可能的解决方案：提供跨距的id，并检查是否允许在函数中单击单击的id

坏主意：您不知道单击了哪个span，因为您从div调用了该函数。

使用，您可以使用方法

stopPropagation

：

$('myChild').addEvent('click', function(ev){
    ev.stopPropagation(); // this will prevent the event to bubble up, and fire the parent's click event.
});

看

---

还可以看到这个非常类似的问题：

您需要一个事件处理程序（在类似jQuery的情况下很容易做到这一点），它捕捉div中跨度的单击，并且仅在跨度有/没有特定类的情况下触发函数。

给跨度一个id一个附加onclick事件并使用它

jQuery示例

$("#spn2").click(function(event){
  event.stopPropagation();  
});

---

：停止向父元素冒泡事件，防止任何父处理程序收到事件通知

使用库是有意义的，但如果没有库，您可以尝试（使用整个页面进行编辑以进行测试）：

允许点击
不允许单击
允许点击

我遇到了同样的问题，无法让jQuery工作，所以我使用了简单的Javascript：

document.getElementById("your_span").addEventListener("click", (event) => {
    event.stopPropagation();
});

这对我来说是个好办法。显然，您需要将

addEventListener

添加到您想要应用它的每个元素中。因为我做了很多DOM操作，所以这对我来说不是问题。 希望这对任何人都有帮助：）

允许点击
不允许单击
允许点击
功能手动切换（cur）{
如果（cur！==event.target）返回false；
//代码
}

对您建议的js库进行投票表决，就像phoenix建议使用jQuery库是最简单（也是最兼容浏览器）的方法一样，我使用公认的答案来交换一些位，并使用jQuery实现我需要的功能。谢谢你的回答。（在这个问题上我没有投任何反对票……

事件

<代码>e？似乎缺少了一些东西X，e不工作我只在cancelBubble浏览器中测试了它，我将它更改为event（即window.event），并在其中添加了一些测试代码。它至少在FF3.5和IE7I中可以工作，我也尝试过类似的东西，但在stopPropagation中不行。（在这个问题上我没有投任何反对票……）正确的答案和有效的解决方案是有区别的。这实际上是对这个问题的正确回答。谢谢为更好地理解代码添加描述总是很有帮助的。请阅读

document.getElementById("your_span").addEventListener("click", (event) => {
    event.stopPropagation();
});

<div onclick="manualToggle(this)">
    <span>Allowed to click</span>
    <span>Not allowed to click</span>
    <span>Allowed to click</span>
</div>
<script>
    function manualToggle(cur){
      if(cur !== event.target) return false;
       
       //CODE
    }
</script>