Как предотвратить выделение текста за пределами HTML5 при двойном щелчке?

Question

(в каждом браузере, который я пробовал), двойной щелчок на холсте HTML5 выделяет любой текст, следующий сразу за элементом холста.Я бы предпочел, чтобы клики были ограничены холстом.

(Примечание: я не хочу полностью отключать выделение текста (например, this ): если вы дважды щелкнитетекст должен быть выбран. Я просто не хочу, чтобы щелчки «просачивались» с холста.)

Возможно ли это?демонстрирует проблему.

Answer 1

Во-первых, позвольте мне заметить, что ваш холст не занимает всю ширину страницы, его ширина составляет всего 100 пикселей.Атрибуты ширины и высоты холста всегда обрабатываются в пикселях, поэтому запись width = "100%" означает только 100 пикселей в отношении тега Canvas.

Чтобы ответить на ваш вопрос, напишите в JavaScript:

//give your canvas an id, I used 'can'    
var canvas = document.getElementById('can');
canvas.onselectstart = function () { return false; }

Проблема с двойным щелчком мыши больше не возникает.

Answer 2

Попробуйте поместить объект canvas в div после всего остального HTML.У меня была эта проблема, все, что мне нужно было сделать, это поместить мои плавающие элементы div в CSS перед (выше) тегом canvas в коде (который содержался в элементе div).на случай, если это поможет кому-то еще.

Answer 3

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

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

Для хорошего примера использования этого, пожалуйста, обратитесь: http://www.dynamicdrive.com/dynamicindex9/noselect.htm

Альтернативно, если вызнакомый со структурой jQuery, очень простой и эффективный плагин доступен по адресу: http://chris -barr.com / entry / disable_text_selection_with_jquery /

Удачи вам!