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来大大简化这一点，你有一个班级（让我们说＆＃34;初始＆＃34;）和一个单独的班级（让他们称之为＆＃34; ;点击＆＃34）。你可以使用Javascript（jQuery对此很好）将类设置为clicked或initial并使用CSS来使背景自动变白并将悬停颜色设置为红色。这远比在JavaScript中执行速度快得多，并且CPU密集度也较低。使用CSS来管理这样的颜色在浏览器中也更加普遍兼容。

Answer 2

感谢Bob Dill，你的想法奏效了：

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

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

img.className = 'hover';
search.className = 'invisible';

img.addEventListener('click', displaySearchField);

function displaySearchField(event) {
    if (clicked == false) {
        clicked = true;
        img.className = 'nohover';
        search.className = 'visible';            
    } else {
        clicked = false;
        img.className = 'hover';

        search.className = 'invisible';

    }
}

});

Answer 3

正如Bob所说，您可以使用CSS :hover伪类来执行悬停部分，并使用脚本在点击时切换背景。

我已经包含了一些辅助函数，但是大部分内容都可以使用HTML5 classList API直接在DOM元素上完成。

使用 classList API：

＆＃13;

.blah {background-color: blue;}
img {background-color: red;}
img:hover {background-color: blue;}

＆＃13;

<img id="d0" onclick="this.classList.toggle('blah')" src="a.jpg" width=100 height=100>

＆＃13;

使用DOM Core API

＆＃13;

// Check if el has className
function hasClass(el, className) {
  return el.className.split(/\s+/).indexOf(className) != -1;
}

// Add className to el
function addClass(el, className) {
  if (!hasClass(el, className)) {
    var classList = el.className.split(/\s+/);
    classList.push(className)
    el.className = classList.join(' ');
  }
  return el;
}

// Remove className from el
function removeClass(el, className) {
  var classList;
  if (hasClass(el, className)) {
    classList = el.className.split(/\s+/);
    classList.splice(classList.indexOf(className), 1);
    el.className = classList.join(' ');
  }
  return el;
}

// If el has className, remove it. Otherwise, add it
function toggleClass(el, className) {
  if (hasClass(el, className)) {
    removeClass(el, className);
  } else {
    addClass(el, className);
  }
}

＆＃13;

  .blah {background-color: blue;}
  img {background-color: red;}
  img:hover {background-color: blue;}

＆＃13;

<img id="d0" onclick="toggleClass(this, 'blah')" src="a.jpg" width=100 height=100>

＆＃13;

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

3 个答案: