突出显示功能(mouseover / mouseout事件侦听器)无法正常工作

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了突出显示功能(mouseover / mouseout事件侦听器)无法正常工作相关的知识,希望对你有一定的参考价值。

我按照一些在线说明和一些关于突出显示单词的现场推荐,但我无法得到任何展示。我还应该提一下,我没有在控制台中收到任何错误消息。

这是.js:

let createWordElems = function() {

  for (var i = 0; i <= 54; i++) {
    var singleWord = document.createElement('span') // creating 'p' element, calling it singleWord
    singleWord.innerhtml = " " + shuffledWords[i]; // setting the content of the first word

    singleWord.addEventListener("click", clickFunc);
    // set onClick event for word

    var giantArrayElement = document.querySelector('.giant-array') // selecting .giant-array and storing it in var
    giantArrayElement.appendChild(singleWord); // appending singleWord to giantArrayElement
  }
}
createWordElems();



///// ======== ////// HIGHLIGHT ///// ======== //////

function highlight() {

  var selectSpan = document.querySelector('span')

  selectSpan.addEventListener("mouseover", function(evt) {
    evt.target.style.backgroundColor = "#ebce8e";
  });

  selectSpan.addEventListener("mouseout", function(evt) {
    evt.target.style.backgroundColor = "#473611";
  });
}

highlight();

更新:

window.addEventListener('onload',function() {
function highlight() {

  var selectSpan = document.querySelector('span')

  selectSpan.addEventListener("mouseover", function(evt) {
    evt.target.style.backgroundColor = "#ebce8e";
  });

  selectSpan.addEventListener("mouseout", function(evt) {
    evt.target.style.backgroundColor = "#473611";
  });

}
highlight();

});
答案

.addEventListener函数通常有点棘手,因为它通常仅在元素已完全加载时才有效。要避免此问题,您应该将highlight函数放入

window.addEventListener('onload',function(){
  //your function here
}

让你的东西工作。

以上是关于突出显示功能(mouseover / mouseout事件侦听器)无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章

使用 .maphilight() 突出显示图像的特定区域

使用Mapbox或Leaflet突出显示多边形

在鼠标悬停时突出显示L.divIcon或在Leaflet地图中以编程方式突出显示

jQuery mouseover / mouseout 显示/隐藏 div

突出显示文本功能,如 google play book

keyup 功能突出显示正在输入的值