onClick event not being called on span inside of a Canvas

General
1

I have a following code:

.playerDraft_cListOfPlayers {
    width: 200px;
    height: 100%;
    position: relative;
}
.playerDraft_ListOfPlayers {
    width: 100%;
    height: 100%;
}
.playerDraft_ListOfPlayers span {
    display:inline-block;
}
#gameFieldDraftPlayersPitch {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left:0;
    height: 1000px;
    width: 1615px;
}

<div class="playerDraft_cListOfPlayers">
    <canvas id="gameFieldDraftPlayersPitch"></canvas>
    <div class="playerDraft_ListOfPlayers">
        <span onclick="alert('Test 1');">Player 1</span>
        <span onclick="alert('Test 2');">Player 2</span>
        <span onclick="alert('Test 3');">Player 3</span>
    </div>
</div>

and that onclick event (which should call alert(‘Test 1, 2, 3…’); is not being called. What am I doing wrong and how can I fix it? Thank you.