.on mouseover 和 eventListener 正确放置

Question

我创建了一个蚀刻素描类型的程序，这样当用户输入高度、宽度和 select 颜色选择时，他们能够在下面提供的网格上绘图。我在绘图部分遇到了麻烦。我通过 codepen 在我的代码中包含了一个 link ...在线 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 从一开始就存在，所以你想在 #pixelCanvas 上放一个 eventListener，但你只想要它如果 td 实际被点击，则做出反应。由于 #pixelCanvas 从一开始就存在，它会知道它的容器内部是否发生了什么，而我生成的 td 不知道它应该有一个 eventListener

Answer 2

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

.on mouseover 和 eventListener 正确放置

.on mouseover and eventListener proper placement

javascript

jquery

dom

onmouseover