Mouse-ul deselecta, nevydelyaemye elemente

În clicuri de mouse au caracteristica neplacuta.

Dublu-clic sau apăsând o mișcare a cursorului iniția, de obicei, de selectare a textului.

Dacă vrem să proceseze ei înșiși evenimentele, că o astfel de separare - urât și incomod. În acest capitol ne uităm la principalele modalități de a face nevydelyaemym elementului.

Pentru a completa imaginea, printre ei sunt, de asemenea, cei care nu sunt aplicabile doar la evenimente mouse-ului.

Problemă: Browser-ul scoate în evidență de text în timp ce se deplasează mouse-ul în timp ce țineți butonul stâng. precum și dublu-clic pe element. Chiar și în cazul în care acest lucru nu este necesar.

Dacă faceți dublu clic pe un astfel de element, lucrări de tratare. Dar efectul secundar este eliberarea textului browser-ului.

Pentru a evita izolarea, trebuie să împiedice acțiunea implicită pentru browser-ul evenimentului selectstart în IE și alte browsere MouseDown.

Cod produs complet, care se ocupă de dublu-clic, fără izolare:

Izolarea, totuși, posibil

Anulează acțiunile în browser atunci când mousedown / selectstart deselectează când faceți clic, dar nu o interzice complet.

Dacă utilizatorul dorește să evidențieze în continuare conținutul text al unui element, el poate face acest lucru.

Suficient pentru a începe selecția (țineți apăsat butonul mouse-ului) nu este pe element, și lângă el. La urma urmei, există anularea nu se va întâmpla, alocarea va începe, iar apoi puteți muta mouse-ul pentru elementul deja.

In loc de a preveni izolare, aceasta poate fi îndepărtată în tratare a evenimentului, după ce a avut loc deja.

Pentru a face acest lucru, vom folosi metodele de lucru cu eliberarea, care sunt descrise într-un capitol separat de selecție: Gama, TextRange și selecție. Aici avem nevoie doar de o singură funcție clearSelection. care va deselecta.

Exemplu de îndepărtare de izolare prin dublu clic pe elementul din listă:

Această abordare are două caracteristici care sunt merită atenție:

  • Izolarea este încă produs, dar apoi eliminate. Se pare ca un fulger, și nu foarte frumos.
  • Selectați cu mișcarea mouse-ului încă funcționează prin prindere, astfel încât vizitatorul are posibilitatea de a selecta elementul de conținut.

Există un non-standard, CSS-proprietate user-select. ceea ce face nevydelyaemym elementul.

A fost o dată planificată în standardul CSS3, apoi abandonează, dar browsere de sprijin a fost deja făcută și, prin urmare, a rămas.

Această caracteristică funcționează (cu prefix) oriunde cu excepția IE9-:

În IE9- nici un utilizator-select. dar există atribut neselectabil.

Acesta anulează selecția, dar are caracteristici:

  1. În primul rând, nu nevydelyaemost moștenit. Adică, părintele are nevydelyaemost copii nevydelyaemymi.
  2. În al doilea rând, textul, spre deosebire de select-utilizator. încă mai pot fi distinse, în cazul în care nu începe selecția pe elementul și lângă el.

Partea din stânga a textului în IE nu sunt selectate când faceți dublu clic. partea dreapta (le) poate fi izolat ca ei nici un atribut neselectabil.

Acest nevydelyaem de text în IE, cu excepția elementelor de copil

Pentru a deselecta există mai multe moduri:

CSS-proprietate-utilizator, selectați - pretutindeni, cu excepția IE9- (prefix necesar, non-standard).

Caracteristica neselectabil = „on“ - funcționează pentru toate IE (trebuie să fie disponibile pentru toți copiii)

Anulați pe mousedown și selectstart:

Deselectați post facto prin clearSelection funcția (). descris mai sus.

Ce o modalitate de a alege?

Depinde de obiectivele și confortul dumneavoastră, precum caz. Toate aceste metode de lucru.

Lipsa de utilizator-selectați - pe care vizitatorul își pierde capacitatea de a copia text. Și dacă el vrea să facă acest lucru?

În orice caz, aceste metode nu sunt concepute pentru a proteja împotriva eliberareapenetrarea și-up.