stopPropagation onclick not working in nested list

Question

i have the following function to swap images on the click of a ul in a nested list, but it doesnt stop bubbling up the list..

function bimageswap (step) {
    step.stopPropagation;
    realstep = parseInt(step) + 1;
    nextsteps = realstep + 1;
    for (iss = nextsteps;iss <= 5; iss++) {
        document.getElementById("step" + iss).className = 'step' + iss;
        alert(iss);
    }
    document.getElementById("step" + realstep).className = 'step' + realstep + 'a';
/*$("#step2").css( 'background-image', 'images/adtl_prodimg/discs/step1_.png');*/
    return false;
}

it is called like this:

<ul onclick='return bimageswap("4")'>

i tried the return because it is what i found in another answer but it still doesnt work. i would greatly appreciate any help thanks!

Answer 1

The stopPropagation method is in the event object, you can't call it on a string. You are also missing the parentheses, so it would just get the stopPropagation property from the string (which returns undefined) and discard it.

Send the event object from the event handler to the function:

<ul onclick="bimageswap(event, '4');">

Use the event object in the function:

function bimageswap(event, step) {
  event.stopPropagation();
  ...