{"id":243,"date":"2011-03-22T17:16:07","date_gmt":"2011-03-22T16:16:07","guid":{"rendered":"http:\/\/capri.dev\/blog\/?p=243"},"modified":"2022-11-05T11:18:16","modified_gmt":"2022-11-05T10:18:16","slug":"eliminar-el-borde-de-puntos-alrededor-de-un-enlace-al-que-se-ha-hecho-click-en-iexplorer-7-y-8","status":"publish","type":"post","link":"https:\/\/capri.dev\/blog\/eliminar-el-borde-de-puntos-alrededor-de-un-enlace-al-que-se-ha-hecho-click-en-iexplorer-7-y-8\/","title":{"rendered":"Eliminar el borde de puntos alrededor de un enlace al que se ha hecho click en IExplorer 7 y 8"},"content":{"rendered":"<p>Este molesto comportamiento del navegador de Microsoft es particularmente antiest\u00e9tico cuando se utiliza un mapa poligonal de coordenadas que llama a funciones Ajax (por lo que no abandonamos la p\u00e1gina que contiene el enlace clicado). Por ejemplo:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/capri.dev\/blog\/wp-content\/uploads\/ejemplo-borde-focus-iexplorer.png\" alt=\"Problema de focus en iexplorer 7 y 8\" \/><\/p>\n<p>Aunque a simple vista parece una tonter\u00eda, la realidad es que se puede perder mucho tiempo intentando eliminar dicho borde punteado a trav\u00e9s de CSS y luego a trav\u00e9s de Javascript mediante complicados gestores de eventos.<\/p>\n<p>Sin embargo, una vez conocido el truco, en realidad es bastante sencillo. La clave est\u00e1 en el hecho de que dicho borde se presenta sobre el enlace activo (el \u00faltimo que ha recibido el focus) por lo que lo que se debe hacer es quitar el foco de atenci\u00f3n (focus) del objeto sobre el que hemos hecho click, en el mismo instante en el que se fija dicho foco de atenci\u00f3n.<\/p>\n<p>Los elementos clave de la soluci\u00f3n son:<\/p>\n<ul>\n<li>M\u00e9todo para quitar el foco de un objeto : objeto.blur();<\/li>\n<li>Evento al que debemos estar atentos : objeto.onFocus();<\/li>\n<\/ul>\n<p>Personalmente prefiero realizar el truco utilizando jQuery, que facilita la elecci\u00f3n del elemento o elementos sobre los que deseamos actuar, por lo que el c\u00f3digo que realiza el la magia ser\u00eda algo as\u00ed:<\/p>\n<pre class=\"prettyprint\">$(\".elementos_sobre_los_que_actuar\").focusin(function(){\r\n\t$(this).blur();\r\n});<\/pre>\n<p>Si se prefiere utilizar Javascript puro, la selecci\u00f3n del elemento o elementos sobre los que actuar debe hacerse de manera m\u00e1s artesanal utilizando las funciones getElementById o getElementsByTagName y bucles para recorrer los arrays devueltos, pero la idea es la misma.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Este molesto comportamiento del navegador de Microsoft es particularmente antiest\u00e9tico cuando se utiliza un mapa poligonal de coordenadas que llama a funciones Ajax (por lo que no abandonamos la p\u00e1gina que contiene el enlace clicado). Por ejemplo: Aunque a simple vista parece una tonter\u00eda, la realidad es que se puede perder mucho tiempo intentando eliminar dicho borde punteado a trav\u00e9s de CSS y luego a trav\u00e9s de Javascript mediante complicados gestores de eventos. Sin embargo, una vez conocido el truco, en realidad es bastante sencillo. La clave est\u00e1 en el hecho de que dicho borde se presenta sobre el enlace activo (el \u00faltimo que ha recibido el focus) por lo que lo que se debe hacer es quitar el foco de atenci\u00f3n (focus) del objeto sobre el que hemos hecho click, en el mismo instante en el que se fija dicho foco de atenci\u00f3n. Los elementos clave de la soluci\u00f3n [&hellip;]<\/p>\n<p><a class=\"more-link\" href=\"https:\/\/capri.dev\/blog\/eliminar-el-borde-de-puntos-alrededor-de-un-enlace-al-que-se-ha-hecho-click-en-iexplorer-7-y-8\/\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[220,221,222],"class_list":["post-243","post","type-post","status-publish","format-standard","hentry","category-tecnico","tag-iexplorer","tag-problemas-iexplorer","tag-windows"],"_links":{"self":[{"href":"https:\/\/capri.dev\/blog\/wp-json\/wp\/v2\/posts\/243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/capri.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/capri.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/capri.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/capri.dev\/blog\/wp-json\/wp\/v2\/comments?post=243"}],"version-history":[{"count":0,"href":"https:\/\/capri.dev\/blog\/wp-json\/wp\/v2\/posts\/243\/revisions"}],"wp:attachment":[{"href":"https:\/\/capri.dev\/blog\/wp-json\/wp\/v2\/media?parent=243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/capri.dev\/blog\/wp-json\/wp\/v2\/categories?post=243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/capri.dev\/blog\/wp-json\/wp\/v2\/tags?post=243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}