javascript - 如何忽略javascript中的事件？

Question

所以，我是 javascript 的新手。我的代码如下，它基于一个带有 Canvas 和几个边框的 xaml 文件:

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';
    }

当我单击 Canvas 中的任意位置并使所有边框消失/重新出现时，将触发 OnCanvasClicked 函数。单击特定边框时会触发函数 borderClicked。当我单击特定边框时，函数 borderClicked 确实会触发，但是 OnCanvasClicked 函数也会在之后立即执行，这会导致不需要的结果。我想如果我单击边框，我需要一些方法来忽略 OnCanvasClicked 函数，我用谷歌搜索了这个但老实说，我并不真正理解它们在大多数解决方案中的含义，所以我希望有人能以简单的方式向我解释我需要做什么(以及我正在做什么)。

Answer 1

当 borderClicked 函数触发时需要设置 event.stopPropagation()