Добавление прослушивателя событий на холст

Question

Это не должно быть проблемой, но я не могу понять, почему мой слушатель событий не запускается.Я разложил свой код почти до голых здесь, и все же он не будет играть хорошо.

Единственная переменная, которая мне показалась, это то, что я использую jCanvas jQuery, но я сомневаюсь, что в этом проблема.

Вот код:

jQuery(document).ready(function(){

    // Get the Canvas set to the proper size
canvas = document.getElementById("background");
    canvas.width = document.width;
    canvas.height = document.height;
    canvasW = canvas.width;
    canvasH = canvas.height;

canvas.addEventListener("mousedown", check,false);  
});


function check(ev)
{
alert('click'); 
}

Спасибо, что нашли время, посмотрите на мою глупую головоломку

Answer 1

Ну, в по ссылке, которую вы дали в комментарии для другого ответа , у вас явно холст на заднем плане. Событие не может быть запущено, если элемент находится под другим элементом. Ваш холст имеет z-index из 0, сохраняя его ниже body. Используя консоль, я просто изменил z-index, и он прекрасно работает.

В связанной заметке вы, вероятно, видели, как Google let it snow canvas. Если вы заметили, в начале вы не можете взаимодействовать со снегом. У него низкий z-index. Через некоторое время z-index увеличивается, и вы не можете взаимодействовать с текстом; только со снегом.

Как видите, это не имеет ничего общего с использованием холста. Это просто способ, которым события работают, когда элементы расположены друг над другом. Простой пример, иллюстрирующий мою точку зрения.

Answer 2

Я думаю, что ваш код работает. Это то, что я пытался http://jsfiddle.net/QXSsE/1/

jQuery(document).ready(function() {

    // Get the Canvas set to the proper size
    canvas = document.getElementById("background");

    var context = canvas.getContext('2d');
    if (context) {
        // You are done! Now you can draw your first rectangle.
        // You only need to provide the (x,y) coordinates, followed by the width and
        // height dimensions.
        context.fillRect(0, 0, 150, 100);
    }
    canvas.addEventListener("mousedown", check, false);
});

function check(ev) {
    alert('click');
}