Mouse изчистите, да nevydelyaemye елементи

В кликвания на мишката имате неприятна особеност.

Двукратно щракване или натискане на движение на курсора обикновено инициира избор на текст.

Ако искаме да обработват сами събитията, че такова разделяне - грозно и неудобно. В тази глава ще разгледаме основните начини да се правят елемент nevydelyaemym.

За да бъде картината пълна, като сред тях са и тези, които не са приложими само за мишка събития.

Проблем: Браузърът подчертава текст, докато се движи мишката, докато държите левия бутон. както и кликнете два пъти върху елемента. Дори там, където това не е необходимо.

Ако кликнете два пъти върху такъв елемент, водачът работи. Но страничен ефект е освобождаването на текста на браузъра.

За да се избегне изолацията, ние трябва да се предотврати действието по подразбиране за браузъра събитие selectstart в IE и други браузъри mousedown.

Пълен т код, който обработва двукратно щракване без изолация:

Изолацията, все още е възможно

Отмени съответните действия, когато mousedown / selectstart Отменя когато се натисне, но не го забранява напълно.

Ако потребителят все още иска да подчертае текстовото съдържание на елемент, той може да го направи.

Достатъчно, за да започне подбора (задръжте натиснат бутона на мишката) не е на позиция, а до него. В края на краищата, не е отмяната няма да се случи, разпределението ще започне, а след това можете да се движите мишката, за да елемента вече.

Вместо да попречат на изолацията, тя може да бъде премахната в събитието манипулатор, след като вече се е случвало.

За да направите това, ние използваме методите на работа с освобождаването, които са описани в отделна глава на селекция: Range, TextRange и селекция. Тук ние трябва само един clearSelection функция. който ще премахнете отметката.

Пример за отстраняване изолация чрез двукратно щракване върху елемент от списъка:

Този подход има две функции, които са на стойност обръща внимание на:

  • Изолиране все още се произвежда, но след това се отстранява. Тя изглежда като светкавица, и не е много хубаво.
  • Изберете с движението на затвореното мишката продължава да работи, така че посетителят има възможност да изберете елемента от съдържанието.

Има нестандартно CSS-имот потребителя изберете. което прави елемент nevydelyaemym.

Някога е била планирана в стандарта CSS3, а след това го изоставят, но браузъри поддържат вече са направени, поради което остава.

Тази функция работи (с префикс) навсякъде освен IE9-:

В IE9- не от потребителя изберете. но има unselectable атрибут.

Той отменя избора, но тя има функции:

  1. На първо място, nevydelyaemost не наследи. Това означава, че родителят се nevydelyaemost nevydelyaemymi деца.
  2. На второ място, в текста, за разлика от потребителите изберете. все още могат да бъдат разграничени, ако не започне избора на елемента, а в непосредствена близост до него.

В лявата част на текста в IE не са избрани, когато щракнете двукратно върху. Право част (ги) може да се изолира като й не unselectable атрибут.

Този текст nevydelyaem в IE, с изключение на дъщерните елементи

За да отмените избора има няколко начина:

CSS-имот потребителя изберете - навсякъде освен IE9- (префикс е необходимо, нестандартни).

Умение unselectable = "за" - работи за всички IE (трябва да е на разположение на всички деца)

Отмяна на mousedown и selectstart:

Премахнете след фактически чрез clearSelection (функция). описано по-горе.

Какъв начин да избера?

Това зависи от вашите цели и комфорт, както и в зависимост от случая. Всички тези методи на работа.

Липсата на потребителя изберете - че посетителят губи способността да копирате текст. Какво става, ако той иска, да го направят?

Във всеки случай, тези методи не са предназначени за защита срещу освобождаването и нагоре.