¿Cómo puedo detener la vista del navegador moviéndome a la parte superior de la página cuando el usuario hace clic en el botón de selección jQueryUI?

Question

que han conseguido algún tipo de configuración botones de radio como esto:

<div id="typeRadios"> 
    <input id="note_notetype_note1" name="note[notetype]" type="radio" value="note1" /><label for="note_notetype_note1">note1</label> 
    <input id="note_notetype_note2" name="note[notetype]" type="radio" value="note2" /><label for="note_notetype_note2">note2</label> 
</div> 

Eso me convierto en jQueryUI botones de la siguiente manera:

$("#typeRadios").buttonset(); 

Este es el HTML resultante:

<input type="radio" value="note1" name="note[notetype]" id="note_notetype_note1" class="ui-helper-hidden-accessible"> 
<label for="note_notetype_note1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">note1</span></label> 
<input type="radio" value="note2" name="note[notetype]" id="note_notetype_note2" class="ui-helper-hidden-accessible"> 
<label for="note_notetype_note2" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">note2</span></label> 

Los botones trabajo, pero cada vez que hago clic en uno, el puerto de visualización del navegador vuelve a la parte superior de la página, de la misma manera que ocurre cuando hace clic en un enlace <a href="#">link</a>.

Estoy usando jQuery 1.4.2 y jQueryUI 1.8.7. ¿Cómo puedo prevenir este comportamiento? Gracias por leer.

EDITAR: La pieza <a href="#">link</a> faltaba.

Answer 1

He intentado recrear el problema pero he fallado. Lo he comprobado en FireFox 3.6.13, Google Chrome 8.0 e Internet Explorer 8.

¿Puedes dar más detalles para recrear el problema o puedes probar la página html?

Tiene un evento de clic para los botones de opción. Si tiene uno en su controlador de eventos, puede detener la propagación del evento y probarlo una vez.

function clickhandler(ev){ 
    ev.stopPropagation(); 
    ev.preventDefault(); 
    //Your code here 
} 

Pero el código proporcionado aquí no sugiere nada que pueda causar este comportamiento. Si tiene una página de prueba, actualice la publicación con eso.

Answer 2

parece que necesita manejar un clic, y poner allí return false; al final del controlador. O puede ser mejor para evitar el burbujeo del evento mediante el uso de:

... 
ev.preventDefault(); 
ev.stopPropagation(); 

donde ev - es un objeto de evento

Answer 3

El siguiente controlador de clic evitaría casos esto

function(e){ 
    e.preventDefault(); 
    ... your code 
} 

Answer 4

que he encontrado en las el uso del enlace de anclaje vacío href = "#" causaría saltos en la ventana gráfica (especialmente si se usa dentro de un iframe en cromo). Intente reemplazarlo con href = "javascript: void (0)"

Answer 5

Este no es el comportamiento de la interfaz de usuario jQuery como puede verse en http://www.jsfiddle.net/gaby/3Wz3A/

Es, más probable, algún otro lo que agregue a esos botones

¿Qué sucede cuando hace clic en esos botones de radio? ¿Ocultas y cargas contenido o algo más?

Si lo hace unir un poco de otro manejador de los botones de radio, por favor mostrar que el código ya que podría muy bien ser el culpable ..

Answer 6

me encontré con este problema recientemente y que en realidad han encontrado una solución que podría ayudarle dependiendo de tu CSS.

Básicamente, si usted está ocultando sus botones de radio fuera de la página usando algo como:

input[type="radio"] { left : -10000px ; position absolute ; top : -10000px ; } 

o algo similar es la top : -10000px ; que es el tema.

Es decir, cuando el botón de opción se enfoca inevitablemente mediante el clic de la etiqueta, la página intenta mostrarlo desplazando la vista del navegador hacia el botón de opción. Como el valor mínimo de scrollTop para el navegador es 0, se desplaza hacia la parte superior.

Si elimina la regla top : -10000px ;, solucionará el problema.

Espero que esto ayude.

p.s. El motivo por el cual prevenirDefault y stopPropagation no funcionará en esta instancia, como se menciona como solución en otros comentarios, es que no detienen el comportamiento predeterminado del navegador al enfocar el campo de formulario cuando se hace clic en la etiqueta.

Answer 7

que tenían el mismo problema

FF-única solución rápida (en referencia a su código) sería

$("div#typeRadios input[type='radio']").hide(); 

solución tanto para FF y IE

El culpable se una regla de CSS en la hoja de estilo principal:

input[type="radio"]{position:relative;top:3px;} 

que está en conflicto con jQueryUI .ui-helper-hidden-accessible clase

que tenía que hacer esta regla más específica que limite sólo a las formas "reales" que se utilizan para la presentación de datos

form dl.zend_form input[type="radio"]{position:relative;top:3px;} 

Answer 8

En lugar de utilizar href = "# ", use href =" # add "o cualquier otro texto relevante. Esto resolverá el salto a la parte superior de la página.

Answer 9

Al igual que en la solución de Christos, para anular la hoja de estilo, utilice

top: auto;

encontró en un informe de error de Wordpress: http://core.trac.wordpress.org/ticket/23684 La idea es que la fijación de ambos "izquierda" y "superior" a grandes negativos deberían ser innecesario

Nota para los comentaristas que debaten sobre el manejador de clics o href: jquery-ui está configurando manejadores para sus propósitos, así que prefiero no modificarlos y luego probar accesibilidad, teclado, etc. La solución de anulación de estilo parece inofensivo.

[Editar 2014/02/03] Wordpress solucionado esto en la versión 3.8.1 (o anterior). ¡Este arreglo es un poco frío, el posicionamiento negativo desapareció! Se reemplaza con clip: rect(0 0 0 0); border: 0;, que es aparentemente la manera jquery-ui. Ver https://core.trac.wordpress.org/changeset/26602

Esto todavía está completamente posicionado, por lo que dejarlo en mi o la solución de Christo debería estar bien.

Answer 10

La solución para mí ha sido establecer "position: relative" en

input[type='radio'].ui-helper-hidden-accessible

Editar: No funciona en Firefox ... los botones de radio se hacen visibles

Answer 11

El problema es que cuando se hace clic en la etiqueta del botón de radio, el botón toma enfoque automáticamente. No utilice propiedades de posición como top:-100000000px y left:-100000000px.

Creo que solo tiene que establecer la propiedad Visibilidad del texto de entrada en Oculto.

input[type="radio"]{visibility:hidden;}