Что касается аномалии событий мыши JavaScript, у меня проблемы с

Question

Я нахожусь в процессе разработки небольшого RPG-подобного интерфейса, где пользователю будет предоставлена ​​свобода создавать предметы и оружие, которое они используют. Будьте уверены, эта конкретная система глубоко продумана и не является причиной моей озабоченности. :)

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

Неплохо, а? Он работает практически без ошибок во всем, кроме IE (не кодировал его годами), за исключением одной незначительной проблемы; на самом деле это настолько незначительно, что я вполне уверен, что почти все игроки будут использовать интерфейс, даже не обращая на него внимания. Я, однако, что-то вроде придирки с моими собственными замыслами, и трудиться над этим часами, увы, привел меня сюда.

Итак, гуру JavaScript Stack Overflow, небольшая помощь по этой проблеме:

На данный момент есть два способа, которыми вы можете ввести цвет в холст; Вы можете просто щелкнуть квадраты по отдельности, или вы можете перетащить мышь и заполнить плитки по мере продвижения. Хорошо, попробуй второй вариант. Теперь, вы заметили, что, хотя перетаскивание наиболее определенно происходило, ваше перетаскивание фактически не начиналось, пока вы не переместились на из квадрата, в котором вы начали.

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

Кроме того, сокращение алгоритма, если вы не можете расшифровать мой код:

• глобальная переменная md (при нажатии мыши), установленной в 0 при запуске
• document.onmousedown устанавливает md в 1; и наоборот, onmouseup возвращает его обратно в 0
• выбранный пользователем цвет сохраняется как индекс в cur_color
• палитра пользовательских цветов, хранящихся в palette array
• palette [cur_color] ссылается на текущий выбранный пользователем цвет
• при перемещении по плитке, если мышь удерживается нажатой, toggle () запускает
• toggle () сравнивает backgroundColor рассматриваемой плитки с пользователем cur_color
• если они разные, cur_color перезаписывает, эффективно «рисуя» эту часть холста
• это продолжается до тех пор, пока пользователь не отпустит свою кнопку мыши

В целом довольно простой метод, но вся эта мысль о том, что мышь нажимают, а не регистрируют, пока не опаздывает на квадрат, убивает меня. Опять же, помощь в достижении сути этого вопроса была бы очень признательна.

Answer 1

Это потому, что вы не вызываете tile_over при первом отключении мыши. Прочитав шаги выше, вы можете увидеть это.

Вот исправление, добавьте его в функцию onmousedown:

var target = e.target || e.srcElement;
if (target.tagName == 'DIV' && target.className == 'tile') {
    tile_over(target);
}

Очевидно, что наличие инфраструктуры для обработки целей мышиных событий и т. Д. Упростит это.

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