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();
  ...