Question

我创建了一个蚀刻草图类型的程序，以便当用户输入高度，宽度并选择颜色选择时，他们可以在下面提供的网格上绘图。我在绘图部分遇到了麻烦。我通过codepen在我的代码中添加了一个链接...在线37，我创建了一个鼠标悬停事件，但我无法弄清楚它为什么不起作用。任何反馈将不胜感激。

   $("#pixelCanvas td").on("mouseover",  function(){
   var colorPicker = $("#colorPicker").val();
   $( this ).css("background-color",colorPicker );
   });

  https://codepen.io/unicorn1/pen/JpVmZV

Answer 1

$("#pixelCanvas").on("mouseover", "td", function(){
  var colorPicker = $("#colorPicker").val();
  $(this).css("background-color", colorPicker);
});

您的td动态生成，#pixelCanvas从一开始就存在，所以您想在eventListener上加#pixelCanvas，但您只想让它做出反应如果实际点击了td。由于#pixelCanvas从一开始就存在，它会知道在它的容器内是否发生了某些事情，而我生成的td不知道它应该有eventListener 1}}

Answer 2

我认为此讨论会向您展示鼠标悬停和悬停之间的主要区别。这是它的链接（when to choose mouseover() and hover() function

.on mouseover和eventListener正确放置

2 个答案: