?
Solved

Cancel bubble event

Posted on 2006-04-05
4
Medium Priority
?
890 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        
0
Comment
Question by:minnirok
  • 2
4 Comments
 
LVL 2

Expert Comment

by:faifai
ID: 16387839
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
0
 
LVL 7

Author Comment

by:minnirok
ID: 16388352
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>
0
 
LVL 9

Accepted Solution

by:
smaccari earned 2000 total points
ID: 16390199
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();
        }
    }
0
 
LVL 7

Author Comment

by:minnirok
ID: 16391388
Cool that seems to have done it.

Thanks!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question