Confusion regarding event bubbling and stopPropagation and then permitting bubbling

Question

My menus work like this: each menu item (e.g., Menu Item One below) is in a <td> in a table nested inside ANOTHER <td>. That outer <td> has some onclick event handler (here called "processMenuClick()").

<td onClick="processMenuClick(<item-dependent-arguments>);">
    <table>
        <tr>
            <td class="innermenuitem">Menu Item One</td>
       </tr>
    </table></td>

Under certain conditions I wish to prevent the menu from responding to clicks. In order to test how this will work, I make two buttons. One applies event.stopPropagation to each <td> of class "innermenuitem" like so:

<button onclick="javascript:stopit()">Test the disable menu functionality</button>

<script type="text/javascript">
function stopit()
{
    $("td.innermenuitem").click(function(event)
    {
        event.stopPropagation();
    })
}
</script>

This seems to work great. When I click the button, the menu stops responding to the clicks. But now say I want to re-enable the menu. The click handler is still undisturbed in the outer <td>. So I want my second button to DISABLE the stopPropagation that I've applied to the inner <td>. Does that make sense? If so, how is it done?

Note: Note that the above should allow me to disable the menu and re-enable it without having to rebind the outer <td> to its handler. This is important because the arguments that are passed to "processMenuClick()" are only known on the server. I would have to figure out a way to recall them through some kind of postback if I had to rebind the handler. But I figure since all I've done is stop bubbling the events up from the inner <td>, assuming there's a way to UNDO this (and permit events to bubble up again) I should be golden. But reading other threads it seems like stopPropagation is used for just one event, not like I am thinking of it, which is basically like a "status" on the <td>. Can somebody set me straight? (And hopefully solve the problem I've tried carefully to describe here?) Thanks.

Paragram

score 1 · Accepted Answer · answered Sep 24 '12 at 05:19

1

function startIt(){
     $('td.innermenuitem').off('click');
}

stop it should bind with the on method to make this as simple as possible.

function stopIt(){
    $('td.innermenuitem').on('click', function(event){
       event.stopPropagation();
    });
}

answered Sep 24 '12 at 05:19

Ohgodwhy

49,779
11
80
110

Thank you thank you thank you! It works. I tried to upvote this but I guess I don't have the reputation! Why isn't this technique found when you google turn OFF stopPropagation?? I've seen several folks ask about it, but you are the first person to give away the secret! Did I mention THANK YOU!! – user1693404 Sep 24 '12 at 05:38

score 0 · Answer 2 · answered Sep 28 '17 at 18:19

There is also a way without jQuery:
dataSend sends an ajax request
within onclick you can access the event so after the call the bubbling stops with event.stopPropagation();
without stopPropagation the click event in div '1' will be activated also

<div id='1' class='mnb_bookinfo' 
onclick='dataSend(cBookInfo,34)';>

<div id='2' class='mnb_bookedit' 
onclick="dataSend(cBookEdit,34);event.stopPropagation();">
<img src='misc/mnb/icon_edit.svg' width=32 height=32>
</div>

</div>

Confusion regarding event bubbling and stopPropagation and then permitting bubbling

2 Answers2