JavaScript动态设置元素类名：鼠标事件不生效问题求助

Hey there! The issue with your current code is that you're checking the onmouseover and onclick properties when you first create the element—those properties just reference event handler functions (which are null at initialization), not the current state of whether the mouse is hovering or the element was clicked. That's why it always defaults to the c class and never updates.

Here's a straightforward solution using JavaScript event listeners to handle the states correctly:

Basic Solution #

// Get the target container
const elementRange = document.getElementById("div"); 
// Create the span element
const elementSpan = document.createElement("span"); 

// Set default class (for "other cases")
elementSpan.className = "c";
// Add visible text to the span (optional but helps test behavior)
elementSpan.textContent = "Hover or click me!";

// Switch to class "a" when mouse hovers over the element
elementSpan.addEventListener("mouseover", () => {
  elementSpan.className = "a";
});

// Switch back to class "c" when mouse leaves the element
elementSpan.addEventListener("mouseout", () => {
  elementSpan.className = "c";
});

// Switch to class "b" when the element is clicked
elementSpan.addEventListener("click", () => {
  elementSpan.className = "b";
});

// Append the span to the container div
elementRange.appendChild(elementSpan);

How This Works #

• We start by setting the default class c since that's the state for all scenarios where the mouse isn't hovering and the element hasn't been clicked.
• The mouseover event listener triggers as soon as the mouse enters the span, updating the class to a.
• The mouseout event listener triggers when the mouse leaves, reverting the class back to c.
• The click event listener triggers on a mouse click, setting the class to b.

Optional: Persist the "b" Class After Clicking #

If you want the b class to stay active after clicking (even when the mouse leaves), you can add a simple flag to track the clicked state:

const elementRange = document.getElementById("div"); 
const elementSpan = document.createElement("span"); 

// Flag to track if the element was clicked
let isElementClicked = false;

elementSpan.className = "c";
elementSpan.textContent = "Hover or click me!";

elementSpan.addEventListener("mouseover", () => {
  elementSpan.className = "a";
});

elementSpan.addEventListener("mouseout", () => {
  // Only revert to "c" if the element wasn't clicked
  elementSpan.className = isElementClicked ? "b" : "c";
});

elementSpan.addEventListener("click", () => {
  // Toggle the clicked state
  isElementClicked = !isElementClicked;
  elementSpan.className = isElementClicked ? "b" : "c";
});

elementRange.appendChild(elementSpan);

In this version, clicking the element toggles a persistent state—after clicking, the b class will stay even when the mouse leaves, until you click again to revert back to the default behavior.

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