2012-04-17 14 views
7

Decir que tengo un (li) Lista ul en la página:Cómo evitar que el doble clic en seleccionar texto en javascript

<ul> 
<li>xxx<li> 
<li>xxx<li> 
</ul> 

El elemento li Se puede hacer clic y doble clic, están unidos con estos eventos y I return false en ambos.

$('ul li').on('click',function(){ 
    //do what I want 
    return false; 
}).on('dblclick',function(){ 
    //do what I want 
    return false; 
}); 

Pero cuando el usuario hace doble clic en el elemento, se seleccionará el texto dentro del li. ¿Cómo se puede prevenir esto?

Actualización:

Resuelto ahora, yo uso el siguiente código con el selector CSS por NiftyDude:

$('ul li').on('click',function(){ 
    //do what I want 
    return false; 
}).....on('dragstart',function(){return false;}).on('selectstart',function(){return false;}); 
+1

Como nota al margen, es probable que desee utilizar ['e.preventDefault()' en lugar de 'return false'] (http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false) –

+0

No funciona también – hguser

+0

No se supone que sea una solución, es algo que debe saber y hacer. –

Respuesta

18

Se puede desactivar la selección de texto mediante CSS (Tenga en cuenta que esto efectivamente desactivará todos los métodos de selección y no solo hará doble clic)

ul li { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

http://jsfiddle.net/T3d7v/1/

+1

Tenga en cuenta que esto deshabilitará * todo * métodos de selección, no solo haciendo doble clic. –

+0

Hmm, tienes razón, editaré si obtuve una mejor solución –

+0

No estoy seguro de que exista una, simplemente anotando, así que está claro ':)'. –

2

No se puede detener el selecto suceda pero se puede borrar la selección justo después de que está hecho:

<script type="text/javascript"> 
document.ondblclick = function(evt) { 
    if (window.getSelection) 
     window.getSelection().removeAllRanges(); 
    else if (document.selection) 
     document.selection.empty(); 
} 
</script> 

Para evitar también la selección párrafo entero por "triple clic", aquí es el código requerido:

var _tripleClickTimer = 0; 
document.ondblclick = function(evt) { 
    ClearSelection(); 
    window.clearTimeout(_tripleClickTimer); 

    //handle triple click selecting whole paragraph 
    document.onclick = function() { 
     ClearSelection(); 
    }; 

    _tripleClickTimer = window.setTimeout(function() { 
      document.onclick = null; 
    }, 1000); 
}; 

function ClearSelection() { 
    if (window.getSelection) 
     window.getSelection().removeAllRanges(); 
    else if (document.selection) 
     document.selection.empty(); 
} 

Source/Live test.

Esto debería funcionar en cualquier navegador, informe cualquier navegador donde no esté funcionando.

+0

: verifique esto'http: // i.stack.imgur.com/5X5Sp.png' – hguser

+0

¿Qué quiere decir? – Pachonk

+0

Puedo seleccionar el texto. – hguser

Cuestiones relacionadas