防止javascript onclick on child元素

StackOverflow https://stackoverflow.com/questions/1431812

  •  07-07-2019
  •  | 
  •  

题

好的，简单的问题：

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

如果不复制manual切换到允许点击的2个跨度，我该如何阻止“不允许点击”？单击它时触发它的父div onclick事件？

有帮助吗？

解决方案

你需要一个事件处理程序（在jQuery这样的事情中很容易做到这一点），它可以捕获div中的跨度点击，并且只有当例如span有/没有特定的类时才触发该函数。

其他提示

为span添加一个id on attach onclick事件并使用

jQuery示例

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

event.stopPropagation（）：停止冒泡父元素的事件，防止任何父处理程序被通知事件。

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

<html><head></head>
<body>
<script type="text/javascript"><!--
function manualToggle(val)
{
    alert(val.id);
}

--></script>

<div id="test" onclick="manualToggle(this);">
    <span>Allowed to click</span>
    <span onclick="event.cancelBubble=true;if (event.stopPropagation) event.stopPropagation();">Not allowed to click</span>
    <span>Allowed to click</span>
</div>
</body>
</html>

使用 mootools ，您可以使用方法 stopPropagation ：

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

请参阅 http://mootools.net/docs/core/Native/事件＃事件：stopPropagation

也看到了这个非常相似的问题：如何在点击孩子时停止为父元素触发onclick事件？

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

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

这对我有用。显然，你需要将 addEventListener 添加到你想要应用它的每个元素。由于我做了很多DOM操作，这对我来说不是问题。 希望这有助于任何人：）

可能的解决方案：给出span的id并检查是否允许在你的函数中点击被点击的id

坏主意：因为从div中调用函数，你不知道点击了哪个范围......

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top