title: How to ignore an event in javascript?
body: <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) {
  
          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';
      }
  </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, 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).</p>