.on mouseover和eventListener正确放置

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了.on mouseover和eventListener正确放置相关的知识,希望对你有一定的参考价值。

我创建了一个蚀刻素描类型的程序,以便当用户输入高度,宽度并选择颜色选择时,他们可以在下面提供的网格上绘制。我在绘图部分遇到了麻烦。我通过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

以上是关于.on mouseover和eventListener正确放置的主要内容,如果未能解决你的问题,请参考以下文章

DOM EventListener

JS HTML DOM EventListener

addEventListener和on的区别

java事件机制(订阅/消费模型)/观察者模式 : EventObject,EventListener和Source

springboot~ EventListener事件监听的使用

删除 MovieClip 类会删除其中的 eventListeners 吗?