好的,简单的问题:

<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