multiple elements mouseover and mouseout to false

Question

I got a problem for a long time trying to figure this out but it doesn't work. I'm trying to disable all class that has onmouseover="" and onmouseout="".

So, I tried the following code.

document.getElementsByClassName("Randclass").onmouseout = false;
document.getElementsByClassName("Randclass").onmouseover = false;

Unfortunately, it's not working. Could anyone please help?

I just do an example because of my large amount of code

<script>
    function stay() {
      document.getElementsByClassName("Randclass").onmouseout = false;
      document.getElementsByClassName('Randclass').onmouseover = false;
    }
</script>

<button class="Randclass" onmouseover="Somthing" onmouseout="Somthing" onclick="stay()"></button>
<button class="Randclass" onmouseover="Somthing" onmouseout="Somthing"></button>
<button class="Randclass" onmouseover="Somthing" onmouseout="Somthing"></button>
<button class="Randclass" onmouseover="Somthing" onmouseout="Somthing"></button>

EDIT:

New problem, I'm also using php but you'll only see html and javascript For now, ok I have multiple form Tags that has the same class name I'm trying to submit a form when I hover/onmouseover, this form is not for filling in information, it is more likely to be showing information targeting to a Iframe, when you hover/onmouseover it will change the src of the iframe to other people information, now the reason I ask this question is because of the other frames is in the way to add friends (Don't worry I'll show you a image)[here][1] and[here][2]

// this is what each form looks like

                  <form action="php-SM-UserInfo-Menu+Function.php" 
                    target="Menu" 
                    method="POST"
                    onclick="stay()" 
                    style="z-index: 1;"
                    class="Offset">
                      <button id="User-User" onclick="stay()" <?php echo $row["Favor_Color_Two"];?>>
                        <img id="User-User-Image" src="<?php echo $row['Front_Img'];?>" width="192" height="192" alt="#" />
                        <div id="User-User-Name">
                            <?php echo $row['First_Name']." ".$row['Last_Name']; ?>
                            <div <?php echo $row['Star_Img'];?>>
                        </div>
                        <input type="hidden" name="User_ID" value="<?php echo $row['User_ID']; ?>">
                      </button>
                  </form>

and

var myVar;

const elements = document.getElementsByClassName("Offset");

function handleMouseOver(e) {
    clearTimeout(myVar);
    e.submit();
}


function handleMouseOut(e) {
    myVar = setTimeout(timeup, 3000);
    off.submit();
}

function initMouseEvents() {
    Array.from(elements).forEach((element) => {
        element.addEventListener('mouseover', handleMouseOver);
        element.addEventListener('mouseout', handleMouseOut);
    });
}

function stopMouseEvents() {
    Array.from(elements).forEach((element) => {
        element.removeEventListener('mouseover', handleMouseOver);
        element.addEventListener('mouseout', handleMouseOut);
    });
}

function stay() {
    stopMouseEvents();
    timeup();
}

function timeup(){
    document.getElementById("Menu").src = "php-SM-User-SearchMenu.php";
}

initMouseEvents();

Lashan Fernando, the reason I didn't check mark yours is because i had form and i needed to submit it but if i did a document.getElementsByClassName("Offset").submit(); it will only do the first one when I hover on a different one! Thanks for The answer. ;) [1]: https://i.stack.imgur.com/8b77c.png [2]: https://i.stack.imgur.com/RvBUb.png

Please add some code so we can help you – Parth Raval Nov 12 '20 at 05:34 — Parth Raval, Nov 12 '20 at 05:34

score 1 · Answer 1 · answered Nov 12 '20 at 07:24

I just tried using evetListners

const elements = document.getElementsByClassName("Randclass");
const box = document.querySelector(".box");

const handleMouseOver = (e) => {
  box.classList.add('active')
}

const handleMouseOut = (e) => {
  box.classList.remove('active')
}

const initMouseEvents = () => {
  Array.from(elements).forEach((element) => {
    element.addEventListener('mouseover', handleMouseOver);
    element.addEventListener('mouseout', handleMouseOut);
  });
}

const stopMouseEvents = () => {
  Array.from(elements).forEach((element) => {
    element.removeEventListener('mouseover', handleMouseOver);
    element.addEventListener('mouseout', handleMouseOut);
  });
}

const stay = () => {
  stopMouseEvents();
}

initMouseEvents();

.box {
  background: red;
  width: 100px;
  height: 100px;
}

.active {
  background: blue;
}

<div class="box"></div>
<button class="Randclass">what</button>
<button class="Randclass">what</button>
<button class="Randclass">what</button>
<button class="Randclass" onclick="stay()">Hello 1</button>

Thanks it works thanks so much but let me try – Punyathom Vang Nov 12 '20 at 15:58 — Punyathom Vang, Nov 12 '20 at 15:58
THis work but i got mor problems – Punyathom Vang Nov 12 '20 at 18:46 — Punyathom Vang, Nov 12 '20 at 18:46
What are they, ill have a look – Lashan Fernando Nov 12 '20 at 21:18 — Lashan Fernando, Nov 12 '20 at 21:18

score 0 · Answer 2 · answered Nov 12 '20 at 05:46

0

You can try something like this:

document.getElementByClassName("Randclass").addEventListener("mouseover mouseenter mouseleave mouseup mousedown", function() {
   return false
});

Or adding jQuery code, then do something like this:

$(".Randclass").on("mouseover mouseenter mouseleave mouseup mousedown", function() {
   return false
});

answered Nov 12 '20 at 05:46

rensothearin

670
1
5
24

Both of them didnt work – Punyathom Vang Nov 12 '20 at 05:50
Do you want when clicking on hello1 button, the what button to stop working? – rensothearin Nov 12 '20 at 06:02
yes but not just one i want all the what butons to stop – Punyathom Vang Nov 12 '20 at 06:05
I dont know if this fit with what you want. Check here https://jsfiddle.net/rensothearin/6qkzr3c4/ – rensothearin Nov 12 '20 at 06:23
no its not working i want to do multiple of them, but thanks any way for trying – Punyathom Vang Nov 12 '20 at 06:28
then you should declare the global variable to contain the value of what you want to change. when you click on stay button, the global variable cache the value then store it. – rensothearin Nov 12 '20 at 06:32
I don't understand?? – Punyathom Vang Nov 12 '20 at 06:34
https://www.javatpoint.com/javascript-global-variable. I meant declaring a global variable to store the state of what button which contains mouseover/mouseout property. – rensothearin Nov 12 '20 at 06:38
I'v done these too – Punyathom Vang Nov 12 '20 at 06:41
I already search all these things – Punyathom Vang Nov 12 '20 at 06:44

multiple elements mouseover and mouseout to false

2 Answers2