reactJS framework mouseOver and mouseEnter are not recognised, though onClick works fine

Question

My code:

import React, {useState} from 'react';




function HeaderNavbar() {
  console.log("HeaderNavbar: starting");

 var [isMouseEnter, setMouseEnter] = React.useState(0);
  console.log("HeaderNavbar: isMouseEnter set to [" + isMouseEnter + "]");

function SetDivToDefault (defaultTileName, eventAction) {
  var divToChangeDefault ="";
  console.log("SetDivToDefault: NOT [" + eventAction + " | " + defaultTileName + "]");
  // default style is the same for all events

  divToChangeDefault = document.getElementById(defaultTileName);
  console.log("SetDivToDefault - changing backgroundcolor to grey for [" + eventAction + " | " + defaultTileName + "]");
  divToChangeDefault.style.backgroundColor = 'grey';
  divToChangeDefault.style.fontFamily = 'londrinaSketcheRegular';
  divToChangeDefault.style.color = '#98d6ea';
} // end function SetDivToDefault 

    // function SetAllTileStyles sets and returns all the tileStyles after a user event (Click, MouseEnter, MouseLeave);
    function SetAllTileStyles(eventTileName, eventAction) {
      console.log("SetAllTileStyles: Called with ["+ eventTileName + "|"  + eventAction + "]");


      if (eventAction = "Clicked") {
        switch (eventTileName) {
          case "Tile1":
            console.log("SetAllTileStyles [" + eventTileName + "] for [" + eventAction + "]");
            var divToChange = document.getElementById('Tile1');
            divToChange.style.backgroundColor = 'blue';
            divToChange.style.fontFamily = 'londrinaBlackRegular';
            divToChange.style.color = 'yellow';

             // set remaining tiles to default
             SetDivToDefault("Tile2", eventAction);
             SetDivToDefault("Tile3", eventAction);
             SetDivToDefault("Tile4", eventAction);
             SetDivToDefault("Tile5", eventAction);           
          break; // end of Case Tile1

          case "Tile2":
            console.log("SetAllTileStyles [" + eventTileName + "] for [" + eventAction + "]");
            divToChange = document.getElementById('Tile2');
            divToChange.style.backgroundColor = 'blue';
            divToChange.style.fontFamily = 'londrinaBlackRegular';
            divToChange.style.color = 'yellow';

             // set remaining tiles to default
             SetDivToDefault("Tile1", eventAction);
             SetDivToDefault("Tile3", eventAction);
             SetDivToDefault("Tile4", eventAction);
             SetDivToDefault("Tile5", eventAction);           
             break; // end of Case Tile2

          case "Tile3":
            console.log("SetAllTileStyles [" + eventTileName + "] for [" + eventAction + "]");
            divToChange = document.getElementById('Tile3');
            divToChange.style.backgroundColor = 'blue';
            divToChange.style.fontFamily = 'londrinaBlackRegular';
            divToChange.style.color =  'yellow';

             // set remaining tiles to default
             SetDivToDefault("Tile1", eventAction);
             SetDivToDefault("Tile2", eventAction);
             SetDivToDefault("Tile4", eventAction);
             SetDivToDefault("Tile5", eventAction);          
          break; // end of Case Tile3

          case "Tile4":
            console.log("SetAllTileStyles [" + eventTileName + "] for [" + eventAction + "]");
            divToChange = document.getElementById('Tile4');
            divToChange.style.backgroundColor  = 'blue';
            divToChange.style.fontFamily = 'londrinaBlackRegular';
            divToChange.style.color = 'yellow';

            SetDivToDefault("Tile1", eventAction);
            SetDivToDefault("Tile2", eventAction);
             SetDivToDefault("Tile3", eventAction);
             SetDivToDefault("Tile5", eventAction);          
          break; // end of Case Tile4


          case "Tile5":
               console.log("SetAllTileStyles [" + eventTileName + "] for [" + eventAction + "]");
              divToChange = document.getElementById('Tile5');
              divToChange.style.backgroundColor = 'blue';
               divToChange.style.fontFamily = 'londrinaBlackRegular';
               divToChange.style.color = 'yellow';

                // set remaining tiles to default
                SetDivToDefault("Tile1", eventAction);
                SetDivToDefault("Tile2", eventAction);
                SetDivToDefault("Tile3", eventAction);
                SetDivToDefault("Tile4", eventAction);
          break; // end of Case Tile5 

          default:
            console.log("SetAllTileStyles: default Case activated");
          } // end of Case Tile5


        }// end 0f eventAction = "Clicked"   

        console.log("SetAllTileStyles: tileStyles set for all tiles -  End of Function");       
    } // end of function SetAllTileStyles


    // continuation of function HeaderNavbar

    function HandleClick(event, AllTileStyles) {
      console.log("HandleClick: started - getting event for [" + event.target.id + "]");

      // getting the tile which was clicked
      var tileName = event.target.id; 
      console.log("HandleClick: Calling function SetAllStyles for [" + tileName + "]");
      // Call SetAllTileStyles to set styles following event Click/MouseEnter/MouseLeave
      AllTileStyles = (SetAllTileStyles(tileName, "Clicked"));
      console.log("HandleClick: SetAllTileStyles  returned to function HeaderNavbar.");
    } // end of function HandleClick


    function HandleMouseEnter(event) {
      console.log("HandleMouseEnter: started - isMouseEnter is [" + isMouseEnter + "] getting event for [" + event.target.id + "]");
      var tileName = event.target.id;
      var divToChange = "";
      setMouseEnter(1);
      console.log("HandleMouseEnter: After setting to [1] isMouseEnter is [" + isMouseEnter + "]");
      console.log(isMouseEnter = 1 ? "HandleMouseEnter: isMouseEnter value is [1]" :  "HandleMouseEnter: isMouseEnter value is [" + isMouseEnter + "]");
      divToChange = document.getElementById(tileName);
      console.log("HandleMouseEnter: setting bgColor for element [" + divToChange.id + "]");
      divToChange.style.backgroundColor = '#465881';
      console.log("HandleMouseEnter: bgColor changed for element [" + divToChange.id + "] - changing font");
      divToChange.style.fontFamily = 'londrinaBlackRegular';
      console.log("HandleMouseEnter: font changed for element [" + divToChange.id + "] - changing color");
      divToChange.style.color = '#A6DCEF';
      console.log("HandleMouseEnter: color changed for element [" + divToChange.id + "] - setting mouseEnter to false");
      setMouseEnter(0);
      console.log("HandleMouseEnter: isMouseEnter for element [" + divToChange.id + "] set to [", isMouseEnter + "] - end of function HandleMouseEnter");
    }  // end of function HandleMouseEnter


    function HandleMouseLeave(event) {
      console.log("HandleMouseLeave: started - getting event for [ " + event.target.id + "]");
      var tileName = event.target.id; 
      setMouseEnter(0);
      SetAllTileStyles(tileName, "mouseLeave");

    }  // end of function HandleMouseLeave

    return ( 
      <div>     
        <div className= "flex-container-header">
          <div id="Tile1" className= "linkcontainer" onClick={HandleClick} onMouseEnter={HandleMouseEnter} onMouseLeave={HandleMouseLeave}>Home</div>           
          <div id="Tile2" className= "linkcontainer" onClick={HandleClick} onMouseEnter={HandleMouseEnter} onMouseLeave={HandleMouseLeave}>About</div>          
          <div id="Tile3" className= "linkcontainer" onClick={HandleClick} onMouseEnter={HandleMouseEnter} onMouseLeave={HandleMouseLeave}>Technology</div>  
          <div id="Tile4" className= "linkcontainer" onClick={HandleClick} onMouseEnter={HandleMouseEnter} onMouseLeave={HandleMouseLeave}>Marketing</div>          
          <div id="Tile5"className= "linkcontainer"  onClick={HandleClick} onMouseEnter={HandleMouseEnter} onMouseLeave={HandleMouseLeave}>Modules</div>  
       </div> 
      </div>     
    ) // end of Return Statement

} // end function HeaderNavbar


export default HeaderNavbar;

In the Chrome developer tools there is no response when the cursor moves over one of the linkcontainer tiles. Nothing happens at all. However when I click on one of the tiles it recognises both the click and the mouseEnter for the clicked tile, but only after the click.

I tried mouseOver also - with the same result.

I read somewhere that a state change is required to give effect to the mouseEnter/Over, but that statechange occurs in the eventhandler statement: setMouseEnter(1);

One other strange issue is an error message "Line 1:17: 'useState' is defined but never used.

And yet it is used in the main function HeaderNavbar: var [isMouseEnter, setMouseEnter] = React.useState(0);

I don't want to handle this in CSS unless I have to.

Any suggestions warmly welcomed :-)

cyber5 · Answer 1 · 2020-06-22T02:40:47.193

1

You might need to use anonymous functions to get onMouseEnter and onMouseLeave to work. Try doing something similar to this:

<div id="Tile1" className= "linkcontainer" onClick={HandleClick} onMouseEnter={(e) => HandleMouseEnter(e)} onMouseLeave={(e) => HandleMouseLeave(e)}>Home</div>           
<div id="Tile2" className= "linkcontainer" onClick={HandleClick} onMouseEnter={(e) => HandleMouseEnter(e)} onMouseLeave={(e) => HandleMouseLeave(e)}>About</div>          
<div id="Tile3" className= "linkcontainer" onClick={HandleClick} onMouseEnter={(e) => HandleMouseEnter(e)} onMouseLeave={(e) => HandleMouseLeave(e)}>Technology</div>  
<div id="Tile4" className= "linkcontainer" onClick={HandleClick} onMouseEnter={(e) => HandleMouseEnter(e)} onMouseLeave={(e) => HandleMouseLeave(e)}>Marketing</div>          
<div id="Tile5"className= "linkcontainer"  onClick={HandleClick} onMouseEnter={(e) => HandleMouseEnter(e)} onMouseLeave={(e) => HandleMouseLeave(e)}>Modules</div>

Also, since you imported useState using destructuring, you do not need to call it by doing React.useState. Simply use useState and your warning should go away :)

Edit: On a second look, I discovered an error with this if statement:

if (eventAction = "Clicked") {

There should be 2 equal signs instead of 1 (or 3 equal signs for strict equality checking).

edited Jun 22 '20 at 02:40

answered Jun 18 '20 at 02:22

cyber5

53
7

Hi Abdullah. Thanks for the tip - I will try it later today. In relation to useState, I changed it to react.useState when I got the error that useState was defined but never used. I will change it back but I think it will not make any difference. – SunbeamRapier Jun 20 '20 at 00:40
Sadly that change makes no difference. I made the change in the DIV code for Tile1 only at this stage. But the mouseEnter for Tile1 is not being recognised until a different tile is clicked. If I mouseover Tile 1 nothing happens. When I click on tile 3 it runs the handleMouseEnter code for Tile 3 and then the handleclick code also for Tile 3. It totally ignores Tile1... The useState "not used" warning has now disappeared however :-) – SunbeamRapier Jun 21 '20 at 23:18
That's weird, your original code seems to work for me. Maybe there's an external thing messing with the mouse events? https://codesandbox.io/s/quirky-kapitsa-wy0jo Edit: I just made an edit to my original answer. Please take a look and see if that fixes your problem :) – cyber5 Jun 22 '20 at 02:35
1

Thanks Abdullah I will check it out. I did notice something very strange yesterday. I revised the onMouseEnter routine, making an error as I did. I inadvertently changed the code from "var tileName = event.target.id;" to var tileName = event.id; This caused a crash, but not before the onMouseEnter routine ran. I don't know what to make of this. Perhaps there is some issue in retrieving the event? Anyway, I will check out the sandbox. Thanks for point out the issue with Clicked - that routine actually works fine but I will add the extra = sign for completeness. – SunbeamRapier Jun 22 '20 at 22:17
1

Yeah it seems to work fine in the code sandbox! The console log shows it doing exactly what is should do. I will have to go through the app code with a fine comb - it will be something silly, like a punctuation error perhaps... – SunbeamRapier Jun 29 '20 at 22:48
Yeah that's happened to me before. I hope you find the problem soon and fix it! – cyber5 Jun 30 '20 at 00:06

SunbeamRapier · Answer 2 · 2020-06-30T00:59:18.117

1

Problem resolved!

It seems that when the Chrome Development tools are running, the MouseEnter event is not recognised. If I close the Dev Tools it all works fine. If I open Dev Tools again, the MouseEnter no longer works.

How very frustrating this has been...

I have logged a bug report with Chrome.

edited Jun 30 '20 at 00:59

answered Jun 30 '20 at 00:36

SunbeamRapier

127
2
11

reactJS framework mouseOver and mouseEnter are not recognised, though onClick works fine

2 Answers2