0

Can someone explain how to integrate stop propagation in javascript into my code? I had imagined there would be plenty of clear examples online, but the examples I've seen haven't helped me understand.

I keep seeing this code snippet as an explanation:

function doSomething(e)
{
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}

But i guess my javascript literacy is 0, because im having difficulty determining which of that is literal and which of that is a place holder variable for something im supposed to enter differently.

Like, let's say i have an onclick for a list item and its parent element. And onclick it calls an ajax function, but i need to prevent it from bubbling up.

So is the above function supposed to stand alone? Or is that supposed to represent code that i add into my already existing function?

What is e and why am i passing it as a parameter in my function?

i dont understand what if(!e) would entail. What is e, and when would the conditions for e not being true be met?

This is my code:

ajax query: 

function serverconnect(divID, $clickvalue, datalocation)
{
var1=$clickvalue;
if(xmlhttp)
{
    var obj = document.getElementById(divID);
    xmlhttp.open("GET", datalocation);

    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 &&
        xmlhttp.status == 200)
        {
        obj.innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.send(null); 
}
alert(var1);

serverconnectPP('productpane6', 'clickit', 'ProductPane.php')
}

html:

<li onclick="serverconnect(var1, var2, var3)">Test
     <ul>
     <li onclick="serverconnect(var1, var2, var3)">Test</li>
     </ul>
</li>

The html isnt too important but the point is if i click on the inner li, both onclicks trigger.

I understand jquery is fantastic but id like a javascript explanation please.

shauneba
  • 2,122
  • 2
  • 22
  • 32
user1787489
  • 937
  • 2
  • 8
  • 15
  • 1
    http://help.dottoro.com/ljgfjsxd.php – Popnoodles Feb 08 '13 at 10:40
  • The code you show initially allows for the fact that IE handles the `event` object a little differently to (most) other browsers. It is intended more for functions that are bound in JS code rather than inline event attributes, in which case the `event` object is automatically passed as a parameter by most non-IE browsers. – nnnnnn Feb 08 '13 at 10:40
  • 1
    I have a good idea, read the src of jQuery. you'll find out. – Rain Diao Feb 08 '13 at 10:42
  • Please check this [Quirksmode page](http://www.quirksmode.org/js/events_order.html). – Teemu Feb 08 '13 at 10:42
  • e stands for event, like the event of onclick, !e is checking if there isnt a event... – Toping Feb 08 '13 at 10:42
  • @RainDiao How would reading the src of a library help when i dont even understand the basic elements of the language the library is built on?> – user1787489 Feb 08 '13 at 10:47
  • two links for you: http://javascript.about.com/od/byexample/a/events-cancelbubble-example.htm http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute – Rain Diao Feb 08 '13 at 13:03

0 Answers0