Question

好的，简单的问题：

<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事件？

Answer 1

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

jQuery示例

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

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

Answer 2

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

<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>

Answer 3

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

Answer 4

使用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

也会看到这个非常相似的问题：How can I stop an onclick event from firing for parent element when child is clicked?

Answer 5

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

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

那对我有用。显然，您需要向要应用此元素的每个元素添加addEventListener。由于我做了很多DOM操作，所以这对我来说不是问题。希望这对任何人都有帮助：）

Answer 6

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

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

Answer 7

<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 函数中，您在 params 中有设置事件的元素，

在函数内部我们有事件（一个全局变量对象），在那里你可以得到被点击的元素（event.target），

如果被点击的元素与我们设置事件的元素不同（相等），那么什么都不做。

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

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

防止javascript onclick on child元素

7 个答案: