当html onmouseenter执行时,javascript mouseenter不会触发

问题描述 投票:3回答:2

使用上面的代码时,“mouseenter”和“mouseleave”会在开始时触发一次。 “onmouseenter”和“onmouseleave”在预期时被解雇。如何在预期时使“mouseenter”和“mouseleave”发生火灾?

<!DOCTYPE html>
<html>
    <body>
        <div id="banner" style="border: 2px solid black; height: 200px"></div>
        <div style="border: 2px solid black; height: 200px"></div>
        <script>
            var banner = document.getElementById("banner");

            banner.setAttribute("onmouseenter", 'console.log("onmouseenter")');
            banner.setAttribute("onmouseleave", 'console.log("onmouseenter")');
            banner.addEventListener("mouseenter", console.log("mouseenter"));
            banner.addEventListener("mouseleave", console.log("mouseleave"));

        </script>
    </body>
</html>
javascript mouseenter
2个回答
2
投票

事件侦听器接受一个在事件发生时将触发的函数。此刻,你立刻打电话给console.log,而不是等待事件发生。如果将控制台日志放在函数中,则不会发生这种情况。

banner.addEventListener("mouseenter", function() {
  console.log("mouseenter");
});

banner.addEventListener("mouseleave", function() {
  console.log("mouseleave");
});

这是本周我第二次看到setAttributeonclick一起使用。我建议不要使用那种方法并坚持使用addEventListener


0
投票

如何在预期时使“mouseenter”和“mouseleave”发生火灾?

addEventListener期待一个函数作为回调处理程序而不是函数调用的结果(即console.log)你需要将它们包装在一个function

  banner.addEventListener("mouseenter", function(){ console.log("mouseenter") });
  banner.addEventListener("mouseleave", function(){ console.log("mouseleave") });
© www.soinside.com 2019 - 2024. All rights reserved.