Skip to content

Instantly share code, notes, and snippets.

@kongondo

kongondo/preventAdditionalMouseEvent.html

Forked from toruta39/preventAdditionalMouseEvent.html
Created April 15, 2023 12:02
Show Gist options
  • Save kongondo/4e64b4e9f1e53c855bba26b984e81dfc to your computer and use it in GitHub Desktop.
Save kongondo/4e64b4e9f1e53c855bba26b984e81dfc to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @toruta39 toruta39 revised this gist Jul 17, 2012. 2 changed files with 21 additions and 5 deletions.
    9 changes: 6 additions & 3 deletions preventAdditionalMouseEvent.html
    View file
    Original file line number Diff line number Diff line change
    @@ -7,9 +7,12 @@
    <body>
    <div id="ele" style="width: 300px; height: 300px; background-color: #0FF;">
    This is the parent element.
    <p style="width: 200px; height: 50px; background-color: #FFF;">
    And this is the child element.
    </p>
    <div style="width: 200px; height: 200px; background-color: #FFF;">
    This is the child element.
    <div style="width: 150px; background-color: #000; color: #FFF">
    Grand child element.
    </div>
    </div>
    </div>
    <script type="text/javascript" src="preventAdditionalMouseEvent.js"></script>
    </body>
    17 changes: 15 additions & 2 deletions preventAdditionalMouseEvent.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,10 +2,23 @@ var ele = document.getElementById("ele");

    var over = 0, out = 0;

    //Detect if otherNode is contained by refNode
    function isParent(refNode, otherNode) {
    var parent = otherNode.parentNode;
    do {
    if (refNode == parent) {
    return true;
    } else {
    parent = parent.parentNode;
    }
    } while (parent);
    return false;
    }

    ele.addEventListener("mouseover", function(ev){
    //Make sure that the mouseover event isn't triggered when moving from a child element
    //or bubbled from a child element
    if (ev.relatedTarget.parentNode != this && ev.target == this){
    if (!isParent(this, ev.relatedTarget) && ev.target == this){
    //Event handling code here
    this.style.backgroundColor = "#FF0";
    this.childNodes[0].nodeValue = "Mouseover: " + ++over +", Mouseout: " + out + ".";
    @@ -15,7 +28,7 @@ ele.addEventListener("mouseover", function(ev){
    ele.addEventListener("mouseout", function(ev){
    //Make sure that the mouseout event is triggered when moving onto a child element
    //or bubbled from a child element
    if (ev.relatedTarget.parentNode != this && ev.target == this){
    if (!isParent(this, ev.relatedTarget) && ev.target == this){
    //Event handling code here
    this.style.backgroundColor = "#0FF";
    this.childNodes[0].nodeValue = "Mouseover: " + over +", Mouseout: " + ++out + ".";
  2. @toruta39 toruta39 revised this gist Jul 17, 2012. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions preventAdditionalMouseEvent.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,8 @@ var ele = document.getElementById("ele");
    var over = 0, out = 0;

    ele.addEventListener("mouseover", function(ev){
    //Make sure that the mouseover event isn't bubbled from a child element
    //Make sure that the mouseover event isn't triggered when moving from a child element
    //or bubbled from a child element
    if (ev.relatedTarget.parentNode != this && ev.target == this){
    //Event handling code here
    this.style.backgroundColor = "#FF0";
    @@ -12,7 +13,8 @@ ele.addEventListener("mouseover", function(ev){
    }, false);

    ele.addEventListener("mouseout", function(ev){
    //Make sure that the mouseout event isn't triggered when moving onto a child element
    //Make sure that the mouseout event is triggered when moving onto a child element
    //or bubbled from a child element
    if (ev.relatedTarget.parentNode != this && ev.target == this){
    //Event handling code here
    this.style.backgroundColor = "#0FF";
  3. @toruta39 toruta39 revised this gist Jul 17, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion preventAdditionalMouseEvent.js
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@ ele.addEventListener("mouseover", function(ev){
    }, false);

    ele.addEventListener("mouseout", function(ev){
    //Make sure that the mouseout event is triggered when moving onto a child element
    //Make sure that the mouseout event isn't triggered when moving onto a child element
    if (ev.relatedTarget.parentNode != this && ev.target == this){
    //Event handling code here
    this.style.backgroundColor = "#0FF";
  4. @toruta39 toruta39 revised this gist Jul 17, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion preventAdditionalMouseEvent.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <!DOCTYPE html>
    <html lang="en-US">
    <head>
    <meta charset = "UTF-8">
    <meta charset="UTF-8">
    <title>Prevent additional mouse event</title>
    </head>
    <body>
  5. @toruta39 toruta39 created this gist Jul 17, 2012.
    16 changes: 16 additions & 0 deletions preventAdditionalMouseEvent.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    <!DOCTYPE html>
    <html lang="en-US">
    <head>
    <meta charset = "UTF-8">
    <title>Prevent additional mouse event</title>
    </head>
    <body>
    <div id="ele" style="width: 300px; height: 300px; background-color: #0FF;">
    This is the parent element.
    <p style="width: 200px; height: 50px; background-color: #FFF;">
    And this is the child element.
    </p>
    </div>
    <script type="text/javascript" src="preventAdditionalMouseEvent.js"></script>
    </body>
    </html>
    21 changes: 21 additions & 0 deletions preventAdditionalMouseEvent.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    var ele = document.getElementById("ele");

    var over = 0, out = 0;

    ele.addEventListener("mouseover", function(ev){
    //Make sure that the mouseover event isn't bubbled from a child element
    if (ev.relatedTarget.parentNode != this && ev.target == this){
    //Event handling code here
    this.style.backgroundColor = "#FF0";
    this.childNodes[0].nodeValue = "Mouseover: " + ++over +", Mouseout: " + out + ".";
    }
    }, false);

    ele.addEventListener("mouseout", function(ev){
    //Make sure that the mouseout event is triggered when moving onto a child element
    if (ev.relatedTarget.parentNode != this && ev.target == this){
    //Event handling code here
    this.style.backgroundColor = "#0FF";
    this.childNodes[0].nodeValue = "Mouseover: " + over +", Mouseout: " + ++out + ".";
    }
    }, false);