Question

我的页面上有类为“ .folder-ico ”的文件夹。当我单击某个文件夹时，通过调用函数 addTinyMenuInsideIco（），将显示该文件夹中的小菜单。现在，如果我单击除单击的文件夹或单击的文件夹的元素以外的任何元素，应使用 removeTinnyMenuInsideIco（）删除微小菜单。不幸的是， $（'body'）。on（'click'，function（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>

Answer 1

在事件调用中尝试以下代码：
event.preventDefault();

或者您可以通过添加来防止嵌套元素触发父元素的事件 event.stopPropagation();

MDN preventDefault

MDN stopPropagation

Answer 2

这种行为称为冒泡（我建议您阅读What is event bubbling and capturing?）。

该想法的概述是：当在内部元素中触发事件时，该事件首先触发到元素中，然后按顺序泡入父元素中。

>

大多数情况下，此功能很强大。例如，如果我有一个带有图像的按钮，则希望单击图像以触发按钮的单击事件侦听器。不幸的是，有时候，就像您的情况一样，您不想要那样。幸运的是，有一个解决方案。

您可能知道，js中的每个事件侦听器都有一个{ "name": "performance-tests", "version": "1.0.0", "description": "Performance tests and end to end tests.", "main": "jest.js", "scripts": { "debug": "node --inspect-brk ./node_modules/.bin/protractor protractor.conf.js", "pretest": "npm run tsc && npm run webdriver-update", "test": "./node_modules/protractor/bin/protractor protractor/compiled-js-files/protractor.conf.js", "e2e": "npm run tsc && ./node_modules/protractor/bin/protractor protractor/compiled-js-files/protractor.conf.js", "grid": "sh run-grid.sh && npm run tsc && npm run e2e", "tsc": "./node_modules/typescript/bin/tsc", "webdriver-update": "./node_modules/protractor/bin/webdriver-manager update --standalone --versions.standalone=3.8.0 --chrome --versions.chrome=78.0.3904.97", "lighthouse": "./node_modules/jest/bin/jest.js --verbose -t=lighthouse", "lighthouse-reports": "./node_modules/jest/bin/jest.js --verbose -t=lighthouse && node ./lighthouse/db.js" }, "repository": { "type": "", "url": "" }, "author": "Sankalan Parajuli", "license": "ISC", "bugs": { "url": "" }, "homepage": "", "dependencies": { "@types/jasmine": "^3.3.12", "@types/jasminewd2": "^2.0.6", "@types/node": "^12.12.14", "jasmine": "^3.3.1", "lighthouse": "^4.0.0-beta", "protractor": "5.4.2", "protractor-beautiful-reporter": "^1.3.3" }, "devDependencies": { "@types/request": "^2.48.3", "@types/selenium-webdriver": "^4.0.0", "csvtojson": "^2.0.8", "jest": "^23.4.1", "moment": "^2.24.0", "mongodb": "^3.1.13", "puppeteer": "^1.6.0", "request-promise": "^4.2.5", "ts-node": "^8.5.2", "typescript": "2.8.1" } }参数。此参数具有一个称为event的方法，该方法将停止冒泡。因此，您需要执行以下操作：

stopPropagation()

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

2 个答案: