event.stopPropagation() not working as intended?
<p>So, I'm new to javascript. My code is the following, it is based on a xaml file with a canvas and a couple of borders in it:</p>

<pre><code>var defaultPage = null;
var aantalKliks;
var correcteBorders;
var incorrecteBorders;
var geenAntwBorders;

function onLoaded() {
defaultPage = document.getElementById('DefaultPage');
alert('In onloaded van Default.xaml.');
aantalKliks = 0;
aantalBorderKliks = 0;

correcteBorders = new Array();
for (var i = 0; i &lt; 3; i++) {
    correcteBorders[i] = defaultPage.content.findName('CorrecteBorder' + i);
}
incorrecteBorders = new Array();
for (var i = 0; i &lt; 3; i++) {
    incorrecteBorders[i] = defaultPage.content.findName('IncorrecteBorder' + i);
}
geenAntwBorders = new Array();
for (var i = 0; i &lt; 3; i++) {
    geenAntwBorders[i] = defaultPage.content.findName('GeenAntwBorder' + i);
}

}

function OnCanvasClicked() {
if (aantalKliks == 2) {
    aantalKliks = 0;
}
if (aantalKliks == 0) {
    for (var i = 0; i &lt; correcteBorders.length; i++) {
        correcteBorders[i].Visibility = 'Visible';
    }

    for (var i = 0; i &lt; incorrecteBorders.length; i++) {
        incorrecteBorders[i].Visibility = 'Visible';
    }

    for (var i = 0; i &lt; geenAntwBorders.length; i++) {
        geenAntwBorders[i].Visibility = 'Visible';
    }

} else if (aantalKliks == 1) {
    for (var i = 0; i &lt; correcteBorders.length; i++) {
        correcteBorders[i].Visibility = 'Collapsed';
    }

    for (var i = 0; i &lt; incorrecteBorders.length; i++) {
        incorrecteBorders[i].Visibility = 'Collapsed';
    }

    for (var i = 0; i &lt; geenAntwBorders.length; i++) {
        geenAntwBorders[i].Visibility = 'Collapsed';
    }
    aantalKliks++;
}



function borderClicked(sender, event) {

    for (var i = 0; i &lt; correcteBorders.length; i++) {
        correcteBorders[i].Visibility = 'Collapsed';
    }

    for (var i = 0; i &lt; incorrecteBorders.length; i++) {
        incorrecteBorders[i].Visibility = 'Collapsed';
    }

    for (var i = 0; i &lt; geenAntwBorders.length; i++) {
        geenAntwBorders[i].Visibility = 'Collapsed';
    }
    sender['Visibility'] = 'Visible';
    event.stopPropagation();
}
</code></pre>

<p>The function OnCanvasClicked is triggered when I click anywhere in the canvas and makes all borders disappear/reappear. The function borderClicked is triggered when I click a specific border. The function borderClicked does trigger when I click a specific border, however the OnCanvasClicked function also gets executed right after, because the border is a child element of the canvas, which causes an unwanted result. I've googled and came up with the <code>event.stopPropagation();</code> function which is supposed to stop the eventflow, yet it does not work, the onCanvasClicked function is still getting executed.. </p>
