Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

225
Vistas
Cannot click or select span elements, after a canvas is focused in HTML - debugging?

I don't often work with HTML these days, and I'm working with some JS libraries that manipulate canvas. I got done all that I needed - but I just realized, that

  • When the webpage starts, all text is selectable (titles, subtitles, notifications etc - basically all text in spans and divs)
  • Then, I typically click on the canvas and interact with it
  • But, if after clicking the canvas, I try to go to, say, the title span, and click on it to select - the text is not selectable anymore (and no text on the webpage is anymore, apart from text form inputs)

So, I tried looking into this, and found:

HTML input fields does not get focus when clicked

The root cause of the problem is disableSelection(). It is causing all the problems, but removing it is not a solution, as (at least in 2016 or slightly before), on touch-screen devices, you "have" to use this if you want to be able to move objects with jQuery.

So, disableSelection is apparently jQuery, but so far I have just used vanilla javascript in my project (I think, but some of the libraries I use might use jQuery).

Anyways, I thought - before I try to blindly copy/paste online code, in an attempt to restore selectability, - could I somehow confirm through the DOM inspector in the browser, that an element is selectable or not? Say, here is how my Firefox Inspector form Web Developer Tools looks like:

enter image description here

Is there something accessible in the Inspector, like a CSS property, to tell me if an object is selectable? If not, can I quickly run a JavaScript one-liner in the browser Console, and find out the selectability status of an element?

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

OK, thanks to the comment of @burkay, I got it - indeed, it is about user-select. So, in Firefox,

  • right-click on an element then choose Inspect Element, then
  • Right-click on the entry (corresponding to this element, autoselected) in the Inspector, and choose "Use in Console"
  • Then you will get a temp1 variable in Console, which you can query:

enter image description here

Note that CSS properties end up as properties of .style property of the element, however their names do not include hyphens anymore, but are instead CamelCase - so for user-select in CSS file, we have .style.userSelect in Console. (also, note that .mozUserSelect tracks/copies the values of userSelect)

Above is the log that I got for my problem; at start, the object has .style.userSelect set to empty string, and it is unselectable; then I tried setting it to "auto", and it remained unselectable; finally I set it to "text" - and at that point, the text became selectable (credit to @RaduSimionescu)

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda