Canvas javascript события на мобильном - PullRequest
Новая
       115

Canvas javascript события на мобильном

0 голосов
/ 17 марта 2020

Я фактически запускаю все эти события, но ни одно из них не работает на мобильном телефоне. Холст на самом деле имеет размер 720x1000 пикселей и не перекрывает всю страницу. 

    canvas.addEventListener('mousedown', alert);
    canvas.addEventListener('mousemove', alert);
    canvas.addEventListener('mouseup',   alert);
    canvas.addEventListener("touchstart", alert);
    canvas.addEventListener("touchend", alert);
    canvas.addEventListener("touchmove", alert);
    canvas.addEventListener("pointerup", alert);
    canvas.addEventListener("pointerdown", alert);
    canvas.addEventListener("pointermove", alert);

Проблема вызвана слушателями событий или холстом? И как я могу решить?

1 Ответ

0 голосов
/ 22 марта 2020

Только на мобильном телефоне?

При проверке с рабочего стола возникает проблема, связанная с прослушивателем событий, когда вы запускаете его и запускаете любое событие, он выдает эту ошибку:

TypeError: 'alert' called on an object that does not implement interface Window.

Вопрос в том, каков ваш alert?

  1. Если это была пользовательская функция, которую вы определили и вызвали alert(), лучше измените имя, потому что оно уже существует, это метод интерфейса Window .
  2. Если это означает alert () , то это не ссылка на функцию, и вам нужно передать ссылку в функцию в качестве обратного вызова. Если вы хотите вызвать его, вам нужно обернуть его в ссылку на функцию (анонимную или именованную), которую вы передадите в качестве обратного вызова.

Другой способ установить обратный вызов в прослушиватель событий

  • с помощью анонимной функции: 

    canvas.addEventListener('mousemove', function(){
    alert('This is an alert');
});


const canvas = document.getElementById('canvas');

canvas.addEventListener('mousemove', function(){
    alert('This is an alert');
});
#canvas{
  background-color: green;
}
<canvas id="canvas" width="100" height="100"></canvas>

  • По именованной функции (с анонимной функцией): 

    function doAlert(msg){
    return function () {
        alert(msg);
    };
}

canvas.addEventListener('mousemove', doAlert('This is an alert'));


const canvas = document.getElementById('canvas');

function doAlert(msg){
    return function () {
        alert(msg);
    };
}

canvas.addEventListener('mousemove', doAlert('This is an alert'));
#canvas{
  background-color: green;
}
<canvas id="canvas" width="100" height="100"></canvas>

  • По именованной функции (с помощью метода bind () ): 

    function doAlert(msg){
    return alert(msg);
}

canvas.addEventListener('mousemove', doAlert.bind(null, 'This is an alert'));


const canvas = document.getElementById('canvas');

function doAlert(msg){
    return alert(msg);
}

canvas.addEventListener('mousemove', doAlert.bind(null, 'This is an alert'));
#canvas{
  background-color: green;
}
<canvas id="canvas" width="100" height="100"></canvas>
...