javascript - 我如何应用另一个事件监听器？

Question

我正在尝试获得这种效果，img 背景颜色最初是白色，当它悬停时，它应该是红色。但是当它被点击时，应该执行一个功能并且 img 背景颜色应该保持红色。然而，当再次点击图像时，样式应该像初始样式一样，当鼠标悬停时，img 背景颜色为红色，当没有悬停时，它为白色。

希望你能清楚地传达信息，这是我的代码:

<script type="text/javascript">            
        document.addEventListener('DOMContentLoaded', function() {

            var img = document.getElementById('search'),
                search = document.getElementById('searchEngine');

            search.className = 'invisible';

            img.addEventListener('mouseover', makeRed);
            function makeRed(event) {
                img.style.backgroundColor = "red";
            }

            img.addEventListener('mouseout', makeWhite);
            function makeWhite(event) {
                img.style.backgroundColor = "white";
            }

            img.addEventListener('click', displaySearchField);

            function displaySearchField(event) {
                if (search.className == 'invisible') {

                    search.className = 'visible';

                    img.style.backgroundColor = "red";

                } else {
                    search.className = 'invisible';
                    makeWhite();

                }
            }
        });
    </script>

问题是，单击时背景颜色不会保持红色!

更新我现在已经听取了您的建议:

document.addEventListener('DOMContentLoaded', function() {

var img = document.getElementById('search'),
    search = document.getElementById('searchEngine'),
    clicked = false;

search.className = 'invisible';

img.addEventListener('click', displaySearchField);

function displaySearchField(event) {
    if (clicked == false) {
        clicked = true;
        img.style.backgroundColor = 'red';
        search.className = 'visible';
        console.log('You have clicked!');

    } else {
        clicked = false;
        img.addEventListener('mouseover', function() {
            img.style.backgroundColor = "red";
        });


        img.addEventListener('mouseout', function() {
            img.style.backgroundColor = "white";
        });

        search.className = 'invisible';

        console.log('You have unclicked!');
    }
}

});

谁能在这最后一刻让我搭便车，我仍然没有达到预期的效果......

Answer 1

您可以使用 CSS 极大地简化此过程，其中您有一个类(假设为“初始”)和一个单独的类(我们称其为“点击”)。您可以使用 Javascript(jQuery 对此非常有用)将类设置为已单击或初始，并使用 CSS 使背景自动变为白色并将悬停颜色设置为红色。这比在 JavaScript 中执行要快得多，而且 CPU 占用也更少。像这样使用 CSS 来管理你的颜色也更普遍地跨浏览器兼容。