Question

我在悬停到各种链接时添加了一个类，效果很好。但是，当您单击链接时，有时新添加的类会停留或JS变得不稳定。我猜我需要添加一个删除类onclick？

$("a").hover(function () {
    switch ($(this).attr("href")) {
        case "somelink1.html":
            parent.top.$(".start-box").toggleClass("tutorialHover");
            break;
            case "somelink2.html":
            parent.top.$(".end-box").toggleClass("tutorialHover");
            break;
            // etc..

Answer 1

我没有在这里看到完整的代码（由等等截断），但悬停期望两个函数。它只是一个mouseenter和mouseleave的封装。您只需要在enter部分中添加addClass并在exit部分中删除removeClass。点击不应该与它有任何关系，除非你确实期待一些不同的东西，如果你还在徘徊但又点击了。

对于像click这样的单个事件，切换类更好。悬停总是至少有可能总是触发输入和输出（除非你永远不会移动鼠标！）所以要明确何时应该添加类以及何时应该删除它。

http://jsfiddle.net/As2dF/

D'哦，刚才意识到你可以为进出两个设置相同的事件...我会留下我的答案，因为我觉得最好是明确的：两个功能 - 一进一出但是我错了，你需要提供两个。

<强> [更新]

尝试将其作为一个函数执行双重任务（即。toggleClass而不是addClass和removeClass，并且毫不奇怪，重现点击问题是不可能的。我相信它是：

注意到您没有阻止链接上的默认行为。一个看似合理的猜测是你正在盘旋（添加类），点击（刷新页面），你的鼠标仍然在NON-CLASSED元素上方;当你搬出去时，课程就会被切换。如果是这个问题甚至是相关的问题，那就是明确addClass和removeClass（而不是toggleClass）是如何确保它做你想做的事情。也就是说，如果这是问题所在，您可以将函数的开头更新为这样，以便href不会被触发。
```
$("a").hover(function (e) {
  e.preventDefault();
  // etc
```
选择器错误（您正在添加和删除碰巧重叠的两个不同“级别”，导致课程变得超级难以理解
与＃1有关，是一个事件冒泡错误。虽然您最终可能不想完全停止传播，但请查看此实验是否有效 - 对于您的触发器功能，传递事件并停止传播：
```
$("a").hover(function (e) {
  e.stopImmediatePropagation();
  // etc
```

这可能会导致其他不必要的副作用（可能还没有触发其他事件！）但至少它有助于隔离冒泡问题。

JQuery .hover .addClass函数 - 点击时JS变得不稳定

1 个答案: