CODEWITHSUNDEEP
javascript
Robin-Hoodie
Robin-Hoodie

Reputation: 4974

How to ignore an event in javascript?

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:

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 < 3; i++) {
        correcteBorders[i] = defaultPage.content.findName('CorrecteBorder' + i);
    }
    incorrecteBorders = new Array();
    for (var i = 0; i < 3; i++) {
        incorrecteBorders[i] = defaultPage.content.findName('IncorrecteBorder' + i);
    }
    geenAntwBorders = new Array();
    for (var i = 0; i < 3; i++) {
        geenAntwBorders[i] = defaultPage.content.findName('GeenAntwBorder' + i);
    }

}

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

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

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

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

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

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



    function borderClicked(sender) {

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

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

        for (var i = 0; i < geenAntwBorders.length; i++) {
            geenAntwBorders[i].Visibility = 'Collapsed';
        }
        sender['Visibility'] = 'Visible';
    }

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, which causes an unwanted result.I think I need some way to ignore the OnCanvasClicked function if I click on a border, I did google this but to be honest I didn't really understand what they meant in most of the solutions, so I was hoping someone could explain it to me in a simple way what I need to do (and what I'm doing).

Upvotes: 1

Views: 591

Answers (3)

sebagomez
sebagomez

Reputation: 9599

@Harshit is correct

You need to set event.stopPropagation() when borderClicked function is fire

I just wanted to add this link/sample which I found very usefull to understand bubbling

http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/ie9_event_phases.htm

Upvotes: 0

ravisolanki07
ravisolanki07

Reputation: 647

Try this which will prevent Javascript to further execution

event.preventDefault()

Upvotes: 0

Harshit Tailor
Harshit Tailor

Reputation: 3281

You need to set event.stopPropagation() when borderClicked function is fire

Upvotes: 4

Related Questions