We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

Cancel bubble event

minnirok
minnirok asked
on
Medium Priority
920 Views
Last Modified: 2007-12-19
Hi,

I have a div within a div. It seems the inner div receives message notifications first, which I'd then like to block from further bubbling to its parent div. Here's my setup:

    <div id = "div_parent" oncontextmenu="parentmenu();">

        <div id = "div_child" oncontextmenu="childmenu();">
        </div>

    </div>

    function childmenu()
    {
        // block oncontextmenu message from getting to parent now.
        if (window.event) {
            window.event.cancelBubble = false;
        }
        else {
            event.stopPropagation();
        }
    }

   This isn't working though, the parent div still tries to popup its context menu after the child first displays its menu. What must I change to get it to work?

Thank you        
Comment
Watch Question

Commented:
try change to this for your // block oncontextmenu message from getting to parent now.

            if(ev.preventDefault)//firefox or those support preventDefault
                  {
                        ev.preventDefault();
                        ev.stopPropagation();
                  }
                  else if(window.event)//ie or those support returnValue and cancelBubble
                  {
                              event.returnValue=false;
                              event.cancelBubble=true;
                  }

hope this can help you

Carlton

Author

Commented:
Hi Carlton,

It doesn't seem to be working, perhaps I used your suggestion incorrectly? Below I've pasted a fully working sample you can paste into an html file to see what I mean. If you right click the inner div box, its parent is still getting the contextmenu msg as well:

<html>
<head>

    <script>

    function menuparent()
    {
        alert("clicked parent");
    }

    function menuchild()
    {
        alert("clicked child");

        if(ev.preventDefault)//firefox or those support preventDefault
        {
            ev.preventDefault();
            ev.stopPropagation();
        }
        else if(window.event)//ie or those support returnValue and cancelBubble
        {
            event.returnValue=false;
            event.cancelBubble=true;
        }

    }
    </script>


</head>

<body>

<div id = "div1" oncontextmenu="menuparent();" style="position:absolute; width:200px; height:200px; left:100px; top:100px; border:1px solid black">

    <div id = "div2" oncontextmenu="menuchild();" style="position:absolute; width:100px; height:100px; left:50px; top:50px; border:1px solid black;">
    </div>

</div>

</body>


</html>
Commented:
For Firefox (and all browsers not using window.event), the event parameter is passed to the handler function.
Use this menuChild function:

function menuchild(ev)
    {
        alert("clicked child");

        if (window.event) {
            event.returnValue=false;
            event.cancelBubble=true;
        }
        else       {
            ev.preventDefault();
            ev.stopPropagation();
        }
    }

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
Cool that seems to have done it.

Thanks!
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.