我正在尝试获得这种效果,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!');
}
}
});
谁能在这最后一刻让我搭便车,我仍然没有达到预期的效果......
最佳答案
您可以使用 CSS 极大地简化此过程,其中您有一个类(假设为“初始”)和一个单独的类(我们称其为“点击”)。您可以使用 Javascript(jQuery 对此非常有用)将类设置为已单击或初始,并使用 CSS 使背景自动变为白色并将悬停颜色设置为红色。这比在 JavaScript 中执行要快得多,而且 CPU 占用也更少。像这样使用 CSS 来管理你的颜色也更普遍地跨浏览器兼容。
关于javascript - 我如何应用另一个事件监听器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31978453/