calling javascript event only once for parent div element

Question

I am trying to call onmouseout event on parent div.

Although function outofdiv is called once cursor goes out of parent div.

But function is again called when cursor travel between different child div which I don't want to happen

please suggest any method using javascript only

 <div id="maze"  onmouseout="outofdiv();">

            <div id="start" onClick="start();">S</div>
            <div class="boundary"></div>
            <div class="boundary"></div>
            <div class="boundary"></div>
            <div class="boundary"></div>
            <div class="boundary"></div>
            <div id="end" onClick="end();">E</div>
</div>


function outofdiv(){
alert("something")

What does `outofdiv()` does? Can you please elaborate more on the problem — Gowtham Shiva, Sep 23 '17 at 09:59
@GowthamShiva It's not about the function; the OP has just misunderstood the usage of `onmouseout`. According to W3Schools: _"The onmouseout event occurs when the mouse pointer is moved out of an element, or out of one of its children."_ — James Douglas, Sep 23 '17 at 10:01
please suggest any way to alert something when mouse pointer moves out of parent div not when traverses between child element — abhishekrn, Sep 23 '17 at 10:04
Thank you @JamesDouglas I got answer form this question I should use onmouseleave simply — abhishekrn, Sep 23 '17 at 10:24

JMP · Answer 1 · 2017-09-23T10:22:25.153

This is called event bubbling. The onmouseout event is triggered by a child div element, and is bubbled up through its DOM hierarchy, in this case to the parent div's onmouseout event handler.

You can use event.target and event.currentTarget to determine if an event has been bubbled or not.

Put

if (event.target!=event.currentTarget) return;

as the first line of your outofdiv function. This prevents the function from continuing if the parent div is not the originator of the onmouseout event.

score 0 · Answer 2 · answered Sep 23 '17 at 10:07

You can find an answer here: Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery

but to sum it up, you have to use another function:

function onMouseOut(event) {
  //this is the original element the event handler was assigned to
  var e = event.toElement || event.relatedTarget;
  if (e.parentNode == this || e == this) {
    return;
  }
  alert('MouseOut');
  // handle mouse event here!
}

document.getElementById('maze').addEventListener('mouseout',onMouseOut,true);

Code taken and modified from the first answer in the link above.

Milan Agheda · Answer 3 · 2017-09-23T10:29:21.167

Not sure but it might be helpful to you

var i = 0;
$( "div.overout" )
  .mouseover(function() {
    i += 1;
    $( this ).find( "span" ).text( "mouse over x " + i );
  })
  .mouseout(function() {
    $( this ).find( "span" ).text( "mouse out " );
  });
 
var n = 0;
$( "div.enterleave" )
  .mouseenter(function() {
    n += 1;
    $( this ).find( "span" ).text( "mouse enter x " + n );
  })
  .mouseleave(function() {
    $( this ).find( "span" ).text( "mouse leave" );
  });

  div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: #d6edfc;
    float: left;
  }
  div.in {
    width: 60%;
    height: 60%;
    background-color: #fc0;
    margin: 10px auto;
  }
  p {
    line-height: 1em;
    margin: 0;
    padding: 0;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


 
<div class="out overout">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>
 
<div class="out enterleave">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

you can also refer this link https://api.jquery.com/mouseover/

1) You haven't included jQuery in your example so it does nothing; 2) The OP clearly stated: _"please suggest any method using **javascript** only"_ — James Douglas, Sep 23 '17 at 10:09

score 0 · Answer 4 · answered Sep 23 '17 at 10:11

0

Just use the following JavaScript:

var i = 0;
function outofdiv() {
  if (!i++) {
    alert("something");
  }
}

This will call only once for single page load.

answered Sep 23 '17 at 10:11

IamMHussain

716
8
11

calling javascript event only once for parent div element

4 Answers4