Question

我正在尝试将onmouseover / out事件附加到页面上的所有锚标记（想法是在onmouseover上将其删除并在onmouseout上删除它。）

我做了以下代码。它将事件附加到所有锚点，但是在任何锚点的onmouseover上，它仅为页面中的最后一个锚点执行下划线。

任何想法，可能出现什么问题？

window.onload = function () {

    var elArray = document.getElementsByTagName("a");
    if (elArray != null && elArray.length > 0) {
        for (var count = 0; count < elArray.length; count++) {
            var el = elArray[count];
            if (el.addEventListener) {
                el.addEventListener("mouseover", function () {
                    el.style.textDecoration = 'underline'
                }, false);
                el.addEventListener("mouseout", function () {
                    el.style.textDecoration = 'none'
                }, false);
            } else {
                el.attachEvent('onmouseover', function () {
                    el.style.textDecoration = 'underline'
                });
                el.attachEvent('onmouseout', function () {
                    el.style.textDecoration = 'none'
                });
            }

        } //for
    } //if
}; //end of window.onload

Answer 1

您可以使用简单的CSS：

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

当CSS可以使用javascript时，不要麻烦浏览器。

Answer 2

这是由于范围问题; el没有作为for循环的每次迭代的范围，它的范围是整个函数，所以一旦for循环完成执行el就指向最后一个元素。由于事件处理函数中的el是同一个变量，因此它们只会影响页面上的最后一个<a>元素。

但是，没有必要为此使用JavaScript，使用CSS已经有一段时间了。以下应该有效：

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

如果您绝对想使用JavaScript，那么您需要使用立即调用的函数表达式创建一个闭包来修改el的范围：

window.onload = function () {

    var elArray = document.getElementsByTagName("a");
    if (elArray != null && elArray.length > 0) {
        for (var count = 0; count < elArray.length; count++) {
            var el = elArray[count];
            (function(el) {
            // el in here is different to el outside since the parameter shadows it
            // you could give them different names - or not declare an el variable outside - to make the difference clearer
            if (el.addEventListener) {
                el.addEventListener("mouseover", function () {
                    el.style.textDecoration = 'underline'
                }, false);
                el.addEventListener("mouseout", function () {
                    el.style.textDecoration = 'none'
                }, false);
            } else {
                el.attachEvent('onmouseover', function () {
                    el.style.textDecoration = 'underline'
                });
                el.attachEvent('onmouseout', function () {
                    el.style.textDecoration = 'none'
                });
            }
            })(el);

        } //for
    } //if
}; //end of window.onload

el范围内的匿名函数更改，以便为el循环的每次迭代引用for的值。< / p>

Answer 3

您使用的变量el不是循环迭代的本地变量，因此它将在触发事件处理程序时具有最后一个值。

使用立即调用的函数创建一个范围，其中每个迭代获取它自己的变量，该变量包含该迭代的元素：

window.onload = function (){

  var elArray = document.getElementsByTagName("a");
  if(elArray != null && elArray.length > 0){
    for(var count=0; count < elArray.length; count++){

      (function(el){

        if (el.addEventListener) {
          el.addEventListener("mouseover", function (){el.style.textDecoration = 'underline'}, false);
          el.addEventListener("mouseout", function (){el.style.textDecoration = 'none'}, false);
        } else {
          el.attachEvent('onmouseover',function (){el.style.textDecoration = 'underline'});
          el.attachEvent('onmouseout',function (){el.style.textDecoration = 'none'});
        }

      })(elArray[count]);

    }//for
  }//if
};//end of window.onload

但是，对于此特定效果，您只需使用CSS：

a { text-decoration: none; }
a:hover { text-decoration: underline; }

将鼠标事件附加到锚点：Javascript

3 个答案: