.on mouseover和eventListener正确放置

Posted 2021-03-28

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

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

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

答案

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

你的td正在动态生成，你的#pixelCanvas从一开始就存在，所以你想把eventListener放在#pixelCanvas上，但你只想让它做出反应，如果真的点击了td。由于#pixelCanvas从一开始就存在，它将知道它的容器内是否发生了某些东西，而我生成的td不会知道它应该有一个eventListener

另一答案

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