Здравствуйте.
Делаю карту звёздного неба (ещё раз большое спасибо всем, кто помог полтора года назад в разработке!)
В последних сборках Google Chrome появилась неприятность: при перетаскивании карты нажатой левой кнопкой мыши, делается выделение картинки (карта синеет, как рисунок отмеченный для перетаскивания). Карта в итоге перетаскивается, но после отпускания кнопки она синеет и это здорово мешает работе. Приходится щёлкать по ней снова, чтобы убрать выделение.
Кстати, при перетаскивании карты на малые расстояния(10-20 точек) выделение картинки не происходит.
Как отменить это безобразие? 
В Opera и FireFox этого нет - перетаскивание по прежнему нормально работает. 
В Хроме заметил это примерно неделю назад, раньше не было.
Ссылка: http://info-7.ru/Astro/nebo_segodnya_geo.php

Добавлено через 12 минут и 15 секунд
Да, забыл написать: пробовал сделать перевод фокуса на другой объект при отпускании мыши - выделение картинки в итоге пропадает, но в процессе перетаскивания она всё равно остаётся синей...

Это сообщение отредактировал(а) kuksha - 25.5.2013, 22:04

Попробуйте

Arantir, спасибо, видимо это то, что надо. 
Но, к своему стыду, не могу осилить ваш ответ -  редко пишу на JS и никогда не использовал такие конструкции... поэтому не понимаю где в моём коде это использовать.

Попробовал сделать так:

не помогло...

На всякий случай: 
http://info-7.ru/Astro/draw_map.js
Работа с мышью в канвасе - строка 1439

Есть более другое решение

и в стили добавить такую магию


unselectable="on" - это фиренная фича от IE. А остальные броузеры будут разбираться со стилями и собственными фенечками. 

ksnk, спасибо, только что это попробовал в черновике:
http://info-7.ru/Astro/nebo_segodnya_geo85.php
(грузится пока долго, секунд 10)
В Хроме получилось интересно - картинка синим действительно не выделяется, но при повторном перетаскивании картинка перетягивается вслед за мышью как выделенная. Если после перетаскивания щёлкнуть мышью, то всё нормально, но пользователям это не объяснишь...

Способ Arantir-а бы попробовать, но не понимаю как...

Это сообщение отредактировал(а) kuksha - 26.5.2013, 11:28

Там на карте стили цепляются 2 раза. В шапке и в body . Это, конечно не криминально, но вызывает определенные сложности при отладке стилей ;)

Я не смог воспроизвести описываемое в моем Хроме. "Отметить" картинку не получилось.

canv.dragstart нужно заменить на canv.ondragstart, иначе в этом коде совсем не будет никакого смысла.

Эффекты несколько необычны. На перетаскивание левой кнопкой иногда не реагирует никак. Зато на перетасквание центральной и правой - реагирует. А вот потом уже и левой таскается нормально. Надо будет в скриптах поковырятся...

Добавлено @ 12:39
Насколько я понимаю, "перетаскивание" сейчас реализовано как последовательное перерисовывание canvas'а? Тут могут встретится драконы.   Событий "перемещения мышки" валится конкретно много и дергать по каждому событию перерисовку не гуманно. Над эти тоже нужно подумать.

Это сообщение отредактировал(а) ksnk - 26.5.2013, 12:39

1901 строка drawMap95.js

заменить на 
иначе ошибки валятся. 

P.S. Ошибки валятся если елозить мышкой до окончания прорисовки карты на старте.

Добавлено @ 13:06
В момент "перетаскивания" нужно отключать "стандартный" механизм вывода информации об объектах. Он мешает.

Это сообщение отредактировал(а) ksnk - 26.5.2013, 13:12

Отлично, спасибо!

В итоге перетаскивание и выделение исчезли после комбинации двух предложенных тут способов:
внесения изменений в стили как описано у ksnk + внесение куска кода "canv.ondragstart = function(event)..." точно как написано у меня в третьем сообщении темы. (ondragstart - спасибо, очипатка  ) 
Поотдельности это не работало.

Насчёт ошибок связанных с ObjInfo.style.display='none' - да, согласен, что отключать правильнее... Сделал как Вы сказали. 
Правда, я никогда не видел ошибок при елозании мышки до прорисовки карты - где они проявлялись? Хоть порадоваться, что сейчас их там не будет 

Добавлено через 5 минут и 14 секунд
кстати, насчёт Хрома у Вас - странно, что не видели выделения... возможно потому, что перетаскивали вдоль осей X и Y - попробуйте для интереса протащить по диагонали из угла в угол по ссылке из первого топика темы.

У Вас на сайте подключен jQuery. Вы ведь не для красоты его подключали?
Мой код — это использование функций jQuery, http://api.jquery.com/on/ . Как бы они не выглядели — это обычный синтаксис Javascript.
$ - это функция. Принимает селектор, возвращает найденные элементы. on - это тоже функция. Ей задаются 2 аргумента: имя ивента и функция для выполнения по этому ивенту. Ничего сверхъестественного.

Вы можете вставить его в любом месте, но после создания canvas (например, после body).

Добавлено через 4 минуты и 21 секунду

Я тоже выделения (синего) не видел. Перетаскивал в самых разных направлениях. Версия хрома последняя.

Добавлено через 6 минут и 54 секунды

Ctrl+Alt+J 

Это сообщение отредактировал(а) Arantir - 26.5.2013, 14:06

Присоединённый файл ( Кол-во скачиваний: 5 )
 Снимок.PNG 72,54 Kb

Понял, я вразные места вставлял - не срабатывало... на досуге покопаюсь.

Насчёт того, что синего никто не видел - во дела   ... а у меня на двух разных машинах глючит... WinXP+Chrome(автоообновляемый).
Ну да ладно - с этими заплатками надёжнее будет, вдруг не я один такой   

Нажать на F5 и елозить по черному кругу. Ошибки валятся (валились  ) в консоль в Хроме.

Перетаскивание можно сделать пореактивнее. На начало перетаскивания можно выводить дополнительный канвас, в который копировать всю инфорацию из первого. Сделать этот второй элемент полупрозрачным, разместить поверх настоящего и двигать его вместе с мышкой.
Придется обрамить canvas div'ом с overflow:hidden и position:relative. 

При слишком далёком "драге" изображение может уехать за экран, но так, imho, все равно лучше, чем ничего не показывать. По отпускани мышки - скрыть-удалить дополнительный канвас и перерисовать основной.

Выделения-то я не видел, но после первого перетаскивания картинка больше не перетаскивалась. При перетаскивании курсор превращался в зачеркнутый кружок. А preventDefault для ивента dragstart эту проблему решает.
Ну, в любом случае, я в JS-консоли это код на Вашем же сайте пробовал и он рабочий.


Просто вставьте сразу перед тем, где в canvas начинается рисование карты. Судя по всему это "Canva.init('karta')" в конце старницы. Кстати за пределами <html> не должно ничего быть. Скрипты в конце страницы надо помещать в конец самого <body>.

Это сообщение отредактировал(а) Arantir - 26.5.2013, 14:25

В общем я уже написал, как всё решилось в этом черновике:
http://info-7.ru/Astro/nebo_segodnya_geo85.php

Но, всё-же интересно добить вариант Arantir-а.
Arantir, сделал так, как смог понять ваши рекомендации:
http://info-7.ru/Astro/nebo_segodnya_geo23.php - не работает...
вставил в скрипт в конце файла и перенёс этот скрипт выше вклейки файла "подвал", чтобы внутрь "body" попасть (хотя и без этого переноса всё работает, может браузеры устраняют эту ошибку... я не спорю с переносом, но смутно помню, что полтора года назад я с этим возился-матерился и в итоге заработало именно так, как стоит сейчас, то есть с ошибкой, когда скрипт стоит в самом конце, после "html"... что было и почему так оставлено, уже не могу вспомнить... ладно - вопрос не в этом, а в том, как ваш вариант запустить правильно)

Добавлено @ 19:26



Эм... вроде нет... перерисовывать ВЕСЬ канвас было бы слишком накладно... При перемещении постоянно сканируется массив координат и если он не пуст, то генерится всплывающее окно с информацией об объекте, который оказался под мышкой - может это сбивает с толку... 
или это я только так думаю, а на деле канвас весь перерисовывается?.. кошмар, если так..
Отдельное спасибо за идею с полупрозрачностью - обязательно попробую!

Это сообщение отредактировал(а) kuksha - 26.5.2013, 19:28

Ну почему же. Теперь картинка перетаскивается без проблем, а не зависает после первого перетаскивания. То, что и ожидалось. На canvas ивент есть, значит код правильно прописан.

А вот синей картинка у меня никогда не становилась, наверное по-этому мне трудно воспринять всю суть проблемы.
Насколько я понял, синий оверлей — это "user selection". От него должно помочь то, что посоветовал ksnk.
Правда я не уверен на счет селектора с unselectable. Браузеры обычно умеют понимать абсолютно любые, даже не документированные, атрибуты (их можно и в селекторах и через JavaScript читать). Но для полной уверенности попробуйте задать стиль самому canvas:

 

Это сообщение отредактировал(а) Arantir - 26.5.2013, 19:28

Упс... правда ваша, Arantir... Теперь и у меня 23-й вариант работает. Видимо меня "синева" с толку сбила - поправил css...
В общем, насколько я понял, оба варианта делают одно и то же разными способами.

Нет, это я что-то напутал. Перерисовка идет один раз.