javascript删除事件侦听器？

Question

On a test webpage I have, there is a link like so: 在我拥有的测试网页上，有一个类似的链接：

<a href="default.html?tab=1" id="t1" onclick="switchf('home',this)">HOME</a>

The style for it is like so: 它的样式如下：

nav > a {
    text-decoration: none;
    color: #0000aa;
    display: inline-block;
        width: 80px;
    padding: 0 10px;
}
nav > a:hover {
    background-color: #eeeeee;
}

and switchf() (switch field) is like so: 和switchf() （切换字段）是这样的：

function switchf(field,tab) {       
    document.getElementById("home").style.display = "none";
    document.getElementById("about").style.display = "none";
    document.getElementById("account").style.display = "none";
    document.getElementById("contact").style.display = "none";

    document.getElementById("t1").style.backgroundColor = "#dddddd";
    document.getElementById("t2").style.backgroundColor = "#dddddd";
    document.getElementById("t3").style.backgroundColor = "#dddddd";
        document.getElementById("t4").style.backgroundColor = "#dddddd";

    document.getElementById(field).style.display = "inline-block";
    tab.style.backgroundColor = "#cccccc";
}

The link basically acts as a tab, to show a different thing. 该链接基本上充当标签，以显示其他内容。 There are three others like it. 还有其他三个喜欢它。

The JavaScript works fine switching tabs, but when I hover over a tab after I've used switchf() , it doesn't change color anymore. JavaScript可以很好地切换选项卡，但是当我使用switchf()之后将鼠标悬停在选项卡上时，它不再更改颜色。

Is there something wrong with my code? 我的代码有问题吗？

thanks. 谢谢。

EDIT 编辑

this is how I fixed mine: 这是我固定我的方式：

first, I added class="tab" to all the links, so they looked like this: 首先，我在所有链接中添加了class="tab" ，因此它们看起来像这样：

<a href="?tab=1" id="t1" class="tab" onclick="switchf('home',this)">HOME</a><br />

second, I changed the javascript so that the function switchf() was like this: 其次，我更改了javascript，使switchf()函数如下所示：

function switchf(field,tab) {       
    document.getElementById("home").style.display = "none";
    document.getElementById("about").style.display = "none";
    document.getElementById("account").style.display = "none";
    document.getElementById("contact").style.display = "none";

    var t = document.getElementsByClassName("tag");  // here is different
    for(var i = 0; i < t.length; i++) {
        t[i].style.backgroundColor = "#dddddd";
        t[i].addEventListener("mouseover");
        t[i].addEventListener("mouseout");
    }

    document.getElementById(field).style.display = "inline-block";
    tab.style.backgroundColor = "#cccccc";
}

and it worked. 而且有效。

Answer 1

Inline CSS takes precedence over stylesheets. 内联CSS优先于样式表。 Once you click on a link, it will set the background-color property for all links, hence all links will not change color when you hover over it. 单击链接后，它将为所有链接设置background-color属性，因此，当您将鼠标悬停在其上时，所有链接都不会更改颜色。

A better alternative than hard-coding the style in your elements, you can try adding a CSS class to your links (like page-active ) and style those elements as needed. 与对元素中的样式进行硬编码相比，这是一种更好的选择，您可以尝试向链接中添加CSS类（例如page-active ），然后根据需要对这些元素进行样式设置。

Yet another alternative that saves you from clearing old classes is adding a class or ID to the page and use that to hide/show links as needed. 使您免于清除旧类的另一种选择是在页面中添加类或ID，并根据需要使用该类或ID隐藏/显示链接。

<style>
nav > a {
    display: none;
}
#page-about nav > a#link-home {
    display: inline-block;
}
<body id="page-about">
    <nav>
        <a href="?tab=home" id="link-home">Home</a>
        <a href="?tab=about" id="link-about">About</a>
    </nav>
</body>

This should give you a general idea, polishing it is an exercise for the reader. 这应该给您一个总体思路，完善它是读者的一种练习。

javascript删除事件侦听器？

问题描述

1 个解决方案

解决方案1
8 已采纳 2013-09-05 16:18:12

javascript删除事件侦听器？

问题描述

1 个解决方案

解决方案1 8 已采纳 2013-09-05 16:18:12

解决方案1
8 已采纳 2013-09-05 16:18:12