Javascript 当在元素外部单击时，如何调用函数并避免触发“在内部单击”事件？

我的页面上有类为“”的文件夹。文件夹ico”。当我单击某个文件夹时，通过调用函数addTinyMenuInsideIco（）显示该文件夹中的小菜单。现在，如果我单击除“单击的文件夹”或“单击的文件夹的元素”之外的任何元素，则应使用removeinymenuinsideico（）删除微小菜单。不幸的是，$（'body'）。在（'click'）上，函数（e）{}…在单击文件夹后会自动触发。有没有正确操作的提示

<div class="folder-ico">
    <div class="folder-image">
    <h2>Ico 1</h2>
</div>

<div class="folder-ico">
    <div class="folder-image">
    <h2>Ico 2</h2>
</div>

<!-- ... -->

<div class="folder-ico">
    <div class="folder-image">
    <h2>Ico n</h2>
</div>

<script>

$('.folder-ico').on('click', whenClickOnIco);

function whenClickOnIco ()
{
    if(!$(this).hasClass('clicked'))
    {
        // Add class '.clicked'
        $(this).addClass('clicked');

        // Add tiny menu inside ico.
        addTinyMenuInsideIco();

        // Remember 'old this'
        let tempThis = this;

        // Add click event to all body elements.
        $('body').on('click',function(e)
        {
            // Clicked on some body element except class '.clicked'.
            if(!$(e.target).hasClass('clicked'))
            {
                // Remove class '.clicked'.
                $(tempThis).removeClass('clicked');

                // Remove tiny menu inside ico.
                removeTinnyMenuInsideIco();

                // Unbind click event.
                $('body').unbind('click');

                // Add event click to unbinded elements.
                $('.folder-ico').on('click', whenClickOnIco);
            }
        })
    }
}

</script>

Ico 1
Ico 2
图标
$（'folder ico'）。在（'click'，whenClickOnIco'）；
函数whenClickOnIco（）
{
if（！$（this）.hasClass（'clicked'））
{
//添加类“.clicked”
$（this.addClass（'clicked'）；
//在ico中添加小菜单。
addTinyMenuInsideIco（）；
//还记得“旧的这个”
让他=这个；
//将单击事件添加到所有主体元素。
$（'body'）。在（'click'，函数（e）上
{
//单击了除类“.Clicked”之外的某些主体元素。
if（！$（e.target）.hasClass（'clicked'））
{
//删除类“.clicked”。
$（testhis）.removeClass（'clicked'）；
//移除ico内的小菜单。
移除InneymenuInsideico（）；
//取消绑定单击事件。
$（'body'）。解除绑定（'click'）；
//添加事件单击以取消绑定元素。
$（'folder ico'）。在（'click'，whenClickOnIco'）；
}
})
}
}

在事件调用中尝试以下代码：

event.preventDefault（）；

或者，可以通过添加

event.stopPropagation（）；

---

在事件调用中尝试以下代码：

event.preventDefault（）；

或者，可以通过添加

event.stopPropagation（）；

---

这种行为被称为“冒泡”（我建议您阅读）

该思想的要点是：当在内部元素中激发事件时，事件首先被激发到元素中，然后按顺序被激发到父元素中

大多数情况下，这是强大的。例如，如果我有一个内置图像的按钮，我希望单击图像以触发按钮的单击事件侦听器。不幸的是，有时，就像您的情况一样，您不希望这样。幸运的是，有一个解决方案

正如您所知，js中的每个事件侦听器都有一个

事件

参数。该参数有一个名为

stopPropagation（）

的方法，用于停止冒泡。因此，您需要执行以下操作：

ICKONICO（e）时的

功能
{
e、 停止传播（）；
// ...
});

这种行为称为“冒泡”（我建议您阅读）

该思想的要点是：当在内部元素中激发事件时，事件首先被激发到元素中，然后按顺序被激发到父元素中

大多数情况下，这是强大的。例如，如果我有一个里面有图像的按钮，我希望单击该图像来触发按钮的单击事件侦听器。不幸的是，有时候，就像你的情况一样，你不想这样。幸运的是，有一个解决办法

您可能知道，js中的每个事件侦听器都有一个

event

参数。此参数有一个名为

stopPropagation（）

的方法，用于停止冒泡。因此，您需要做的是：

ICKONICO（e）时的

功能
{
e、 停止传播（）；
// ...
});

preventDefault（）

在这里不相关。

preventDefault（）

在这里不相关。我应该学习冒泡，但是将e.stopPropagaton（）添加到whenClickOnIco（）不起作用。无论如何，在我的情况下，把点击放在点击中是一个好的解决方案吗？也许还有另一种方法？@Tomasz使用stopPropagation（）显示完整的代码。@Tomasz还有一种更简单的方法在jquery中执行一次性事件，使用

once（）

而不是

on（）

。干得好。如果在文件夹上按更长时间，则会激活“小菜单”。我加了e.stopPropagation（）；在tapLongPress（e）功能开始时。尝试取消注释（'body'）。在（'click'）上，函数（e）并运行。PS：我还注意到，在长时间按下并释放鼠标后，whenClickOnCatFolder会激发并添加。选定的folder cat类不太好…我应该了解冒泡，但会将e.stopPropagaton（）添加到whenClickOnIco（）中不起作用。无论如何，在我的情况下，将单击放在单击内是一个好的解决方案吗？也许还有其他方法可以做到吗？@Tomasz使用stopPropagation（）显示完整的代码。@Tomasz还有一种更简单的方法可以在jquery中执行一次性事件，使用

once（）

而不是

on（）

。给你。如果你在文件夹上按的时间更长，小菜单就会激活。我在tapLongPress（e）函数的开头添加了e.stopPropagation（）；尝试取消注释（'body'）。打开（'click'，函数（e）和run.PS：我还注意到，在长时间按下并释放鼠标后，当ClickKoncatFolder启动并添加.selected folder cat类时，这是不好的。。。