9

好的，简单的问题：

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

如果不将 manualToggle 复制到允许单击的 2 个跨度上，如何防止“不允许单击”跨度在单击时触发其父 div onclick 事件？

4

7 回答 7

19

给 span 一个 id 附加 onclick 事件并使用

一个 jQuery 示例

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

event.stopPropagation()：停止将事件冒泡到父元素，防止任何父处理程序收到事件通知。

于 2009-09-16T09:12:01.860 回答
9

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

<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>
于 2009-09-16T09:19:57.910 回答
2

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

于 2009-09-16T09:11:01.573 回答
2

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

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

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

于 2019-06-29T22:46:21.127 回答
1

使用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/Event#Event:stopPropagation

还可以看到这个非常相似的问题：单击子元素时，如何阻止 onclick 事件触发父元素？

于 2009-09-16T09:08:31.897 回答
0

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

坏主意：你不知道点击了哪个跨度，因为你从你的 div 调用函数......

于 2009-09-16T09:07:10.627 回答
0 
<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>

这里我们在 div 标签上设置了一个点击事件，我们将当前元素（div）作为参数传递

在 manualToggle 函数中，您在参数中设置了事件的元素，

在函数内部我们有事件（一个全局 var 对象），您可以在其中获取单击的元素（event.target），

如果单击的元素与我们设置事件的元素不同（等于），则什么也不做。

还有一些其他方法也可用，使用 stopPropagation

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

于 2021-04-16T08:13:28.840 回答