HTML onclick触发后JavaScript按钮动画失效问题排查求助

嘿，咱们来拆解一下你的问题——按钮点击后动画失效，核心原因其实有两个，其中最关键的是表单默认提交行为，另外还有事件绑定的冗余问题。咱们一步步来解决：

核心问题：表单提交导致页面刷新 #

你的按钮放在<form>标签里，默认情况下点击按钮会触发表单的提交行为，页面会刷新！这直接导致所有JS绑定的事件都被重置，动画自然就失效了。

第一步先解决这个问题：在按钮的点击函数里加上event.preventDefault()，阻止表单提交的默认行为，同时要把event参数传递到函数中：

function chooseLogin(event) {
  // 阻止表单提交，避免页面刷新
  event.preventDefault();
  sitewithbuttons.innerHTML = `
    <div>
    <form action="" method="post">
    <!-- 这里要把event传递给点击函数 -->
    <button onclick="chooseLogin(event)" id="leftbut" class="buts">Login</button><button onclick="chooseReg(event)" id="rightbut" class="buts">Register</button>
    </form>
    </div>
    <br>log
  `;
}

chooseReg函数也要做同样的修改哦。

优化事件绑定：用事件委托避免重复绑定 #

你现在每次替换innerHTML后都重新绑定一次鼠标事件，不仅冗余，还容易出现元素引用混乱的问题。更好的方式是用事件委托——把事件绑定在父元素（也就是sitewithbuttons）上，不管子元素怎么被替换，事件都能生效，不用每次重新绑定。

修改你的JS代码，去掉那些重复的addEventListener，换成下面的写法：

const sitewithbuttons = document.getElementById("inside");

// 初始化页面内容
sitewithbuttons.innerHTML = `
<div>
<form action="" method="post">
<button onclick="chooseLogin(event)" id="leftbut" class="buts">Login</button><button onclick="chooseReg(event)" id="rightbut" class="buts">Register</button>
</form>
</div>
`;

// 事件委托：监听鼠标移入事件
sitewithbuttons.addEventListener("mouseover", function(event) {
  const targetBtn = event.target;
  // 只处理按钮元素
  if (targetBtn.classList.contains("buts")) {
    if (targetBtn.id === "leftbut") {
      targetBtn.classList.add("buthover");
      document.getElementById("rightbut").classList.add("notbuthover");
    } else if (targetBtn.id === "rightbut") {
      targetBtn.classList.add("buthover");
      document.getElementById("leftbut").classList.add("notbuthover");
    }
  }
});

// 事件委托：监听鼠标移出事件
sitewithbuttons.addEventListener("mouseout", function(event) {
  const targetBtn = event.target;
  if (targetBtn.classList.contains("buts")) {
    if (targetBtn.id === "leftbut") {
      targetBtn.classList.remove("buthover");
      document.getElementById("rightbut").classList.remove("notbuthover");
    } else if (targetBtn.id === "rightbut") {
      targetBtn.classList.remove("buthover");
      document.getElementById("leftbut").classList.remove("notbuthover");
    }
  }
});

// 登录选择函数（已加阻止默认提交）
function chooseLogin(event) {
  event.preventDefault();
  sitewithbuttons.innerHTML = `
    <div>
    <form action="" method="post">
    <button onclick="chooseLogin(event)" id="leftbut" class="buts">Login</button><button onclick="chooseReg(event)" id="rightbut" class="buts">Register</button>
    </form>
    </div>
    <br>log
  `;
}

// 注册选择函数（已加阻止默认提交）
function chooseReg(event) {
  event.preventDefault();
  sitewithbuttons.innerHTML = `
    <div>
    <form action="" method="post">
    <button onclick="chooseLogin(event)" id="leftbut" class="buts">Login</button><button onclick="chooseReg(event)" id="rightbut" class="buts">Register</button>
    </form>
    </div>
    <br>rej
  `;
}

（可选）优化CSS，减少冗余代码 #

你的CSS里有很多重复的样式，可以合并起来，让代码更简洁：

/* 把公共样式抽出来 */
.buts, .buthover, .notbuthover {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  border: none;
  padding: 1%;
  text-align: center;
  text-decoration: none;
  transition: 0.35s;
}

.buts {
  background-color: rgb(113, 136, 211);
  width: 50%;
}

.buthover {
  background-color: rgb(77, 94, 150);
  color:rgb(218, 218, 218);
  width: 55%;
}

.notbuthover {
  background-color: rgb(113, 136, 211);
  width: 45%;
}

为什么之前改class没用？ #

你之前尝试把id改成class但动画失效，一是因为你的事件处理逻辑还是依赖id判断，没调整成class相关的逻辑，二是表单提交导致页面刷新的核心问题没解决，所以动画还是不工作。

现在按照上面的步骤修改后，点击按钮不会刷新页面，事件委托也能保证新生成的按钮依然有动画效果，问题就解决啦！

内容的提问来源于stack exchange，提问作者Uzue