Jak zatrzymać rzutowanie przeglądarki przesuwające się na górę strony, gdy użytkownik kliknie przycisk radiowy jQueryUI?

Question

Mam pewną konfigurację przycisków radiowych tak:

<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> 

Że przekształcić przycisków jQueryUI tak:

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

Jest uzyskany HTML:

<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> 

Przyciski działa, ale po kliknięciu jednego z nich port widoku przeglądarki zostaje zwrócony na górę strony, tak samo jak po kliknięciu łącza <a href="#">link</a>.

Używam jQuery 1.4.2 i jQueryUI 1.8.7. Jak mogę zapobiec temu zachowaniu? Dziękuje za przeczytanie.

EDYCJA: Brak części <a href="#">link</a>.

Answer 1

Próbowałem odtworzyć problem, ale mu się nie powiodło. Sprawdziłem to w FireFox 3.6.13, Google chrome 8.0 i Internet Explorer 8.

Czy możesz podać więcej szczegółów, aby odtworzyć problem lub może to być strona testowa HTML?

Masz zdarzenie kliknięcia dla przycisków opcji. Jeśli masz go na swoim programie obsługi zdarzeń, możesz zatrzymać propagację wydarzenia i spróbować raz.

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

Ale jakikolwiek kod podany tutaj nie sugeruje niczego, co może spowodować to zachowanie. Jeśli masz stronę testową, zaktualizuj ten post.

Answer 2

Wygląda na to, że musisz obsługiwać kliknięcie i umieścić tam końcówkę return false; na końcu programu obsługi. Albo może lepiej zapobiegać propagacji zdarzenia przy użyciu:

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

gdzie ev - jest obiekt zdarzenia

Answer 3

Poniższy click obsługi uniemożliwiłby to

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

Answer 4

Mam napotkanych przypadkach, gdy użycie pustego linku kotwicy href = "#" spowodowałoby takie skoki rzutni (szczególnie jeśli użyto ich wewnątrz elementu iframe w chrome). Spróbuj zastępując ją href = „javascript: void (0)”

Answer 5

To nie jest zachowanie UI jquery jak widać na http://www.jsfiddle.net/gaby/3Wz3A/

Jest najprawdopodobniej, jakiś inny kod dodania do tych przycisków.

Co dzieje się po kliknięciu tych przycisków opcji? Ukrywasz i ładujesz zawartość lub coś innego?

Jeśli nie dołączyć inny obsługi do tych przycisków radiowych, należy wykazać, że kod, jak to może równie dobrze być winowajcą ..

Answer 6

I napotkał ten problem niedawno i rzeczywiście znalazł rozwiązanie, które może pomóc w zależności od twojego CSS.

Zasadniczo jeśli ukrywają swoje przycisków radiowych przy użyciu stronie coś takiego:

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

lub coś podobnego jest to top : -10000px ; że jest problem.

Oznacza to, że gdy przycisk radiowy jest nieuchronnie skupiony przez kliknięcie etykiety, strona próbuje go wyświetlić, przewijając okno przeglądarki do przycisku radiowego. Ponieważ minimalna wartość scrollTop dla przeglądarki to 0, przewijana jest do góry.

Po usunięciu reguły top : -10000px ; rozwiąże to problem.

Mam nadzieję, że to pomoże.

p.s. powodem, dla którego preventDefault i stopPropagation nie działają w tej instancji, jak wspomniano jako rozwiązanie w innych komentarzach, jest to, że nie zatrzymują domyślnego zachowania przeglądarki, aby skupić się na polu formularza po kliknięciu etykiety.

Answer 7

miałem ten sam problem

FF tylko szybkie ustalenie (w odniesieniu do kodu) byłoby

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

rozwiązanie zarówno dla FF i IE

Sprawca ukrywał reguła CSS w głównym arkuszu stylów:

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

które kolidowały z jQueryUI .ui-helper-hidden-accessible klasy

musiałem uczynić ten przepis bardziej szczegółowy ograniczenie go tylko do „prawdziwych” form, które są używane do przekazywania danych

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

Answer 8

Zamiast href = "# ", użyj href =" # add "lub dowolnego innego odpowiedniego tekstu. Rozwiąże to przeskok na górę strony.

Answer 9

podobne do rozwiązania Christos jest, aby przesłonić stylów, użyj

top: auto;

Znaleziono go w Wordpress raportu o błędzie: http://core.trac.wordpress.org/ticket/23684 Pomysł jest, że ustawienie zarówno „w lewo” i „top” do dużych negatywów powinny być niepotrzebnym.

Uwaga dla komentujących omawiających obsługę kliknięcia lub href: jquery-ui ustawia obsługę dla swoich celów, więc wolałbym nie zmieniać ich, a następnie musieć sprawdzać dostępność, klawiaturę itp. nieszkodliwy.

[edytuj 2014/02/03] Wordpress naprawił to w wersji 3.8.1 (lub wcześniejszej). Ta poprawka jest fajna, wykluczone pozycjonowanie! Zastępuje go clip: rect(0 0 0 0); border: 0;, co jest najwyraźniej sposobem jquery-ui. Zobacz: https://core.trac.wordpress.org/changeset/26602

Ta sprawa wciąż jest absolutnie umiejscowiona, więc pozostawienie w mojej lub Christo poprawki powinno być w porządku.

Answer 10

Rozwiązaniem dla mnie było ustawić "position: relative" na

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

EDIT: Nie działa na Firefox ... przyciski radiowe stają się widoczne

Answer 11

Problem polega na tym, że po kliknięciu na etykiecie przycisku radiowego, przycisk automatycznie ustawia ostrość. Nie należy używać właściwości pozycji, takich jak top:-100000000px i left:-100000000px.

Myślę, że po prostu musisz ustawić właściwość widoczności tekstu wejściowego na Ukryty.

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