Chcę uruchomić prostą funkcję JavaScript na kliknięcie bez żadnego przekierowania.

Czy jest jakaś różnica lub korzyść między umieszczeniem wywołania JavaScript w hrefatrybucie (na przykład:

<a href="javascript:my_function();window.print();">....</a>

) vs. umieszczenie go w onclickatrybucie (powiązanie go ze onclickzdarzeniem)?

Umieszczenie kliknięcia w href obraziłoby tych, którzy mocno wierzą w oddzielenie treści od zachowania / działania. Argument polega na tym, że treść HTML powinna koncentrować się wyłącznie na treści, a nie na prezentacji lub zachowaniu.

Typową ścieżką w dzisiejszych czasach jest użycie biblioteki javascript (np. Jquery) i utworzenie modułu obsługi zdarzeń za pomocą tej biblioteki. Wyglądałoby to tak:

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );

zły:

<a id="myLink" href="javascript:MyFunction();">link text</a>

dobrze:

<a id="myLink" href="#" onclick="MyFunction();">link text</a>

lepszy:

<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>

jeszcze lepiej 1:

<a id="myLink" title="Click to do something"
 href="#" onclick="MyFunction();return false;">link text</a>

jeszcze lepiej 2:

<a id="myLink" title="Click to do something"
 href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>

Dlaczego lepiej ponieważ return falseuniemożliwi przeglądanie łącza przez przeglądarkę

Najlepsza:

Użyj jQuery lub innej podobnej struktury, aby dołączyć moduł obsługi onclick według identyfikatora elementu.

$('#myLink').click(function(){ MyFunction(); return false; });

Jeśli chodzi o javascript , jedną różnicą jest to, że thissłowo kluczowe w onclickmodule obsługi będzie odnosić się do elementu DOM, którego onclickatrybutem jest (w tym przypadku <a>elementem), podczas gdy thisw hrefatrybucie będzie odwoływał się do windowobiektu.

Jeśli chodzi o prezentację , jeśli hrefatrybut nie występuje w łączu (tj. <a onclick="[...]">), Wówczas domyślnie przeglądarki wyświetlają textkursor (a nie często pożądany pointerkursor), ponieważ traktuje on <a>jako kotwicę, a nie łącze.

Jeśli chodzi o zachowanie , przy określaniu akcji według nawigacji href, przeglądarka zazwyczaj obsługuje otwieranie tego hrefw osobnym oknie za pomocą menu skrótów lub menu kontekstowego. Nie jest to możliwe przy określaniu akcji tylko za pośrednictwem onclick.

Jeśli jednak pytasz, jaki jest najlepszy sposób uzyskania dynamicznej akcji po kliknięciu obiektu DOM, najlepszym rozwiązaniem jest dołączenie zdarzenia przy użyciu javascript niezależnego od treści dokumentu. Możesz to zrobić na wiele sposobów. Częstym sposobem jest użycie biblioteki javascript, takiej jak jQuery, do powiązania zdarzenia:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a id="link" href="http://example.com/action">link text</a>
<script type="text/javascript">
    $('a#link').click(function(){ /* ... action ... */ })
</script>

używam

Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>

Daleka droga, ale załatwia sprawę. użyj stylu A, aby uprościć, a następnie:

<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style> 
<a nohref onClick="alert('Hello World')">HERE</a>

Oprócz wszystkich tutaj, href jest wyświetlany na pasku stanu przeglądarki, a nie klikaj. Myślę, że pokazanie kodu javascript nie jest przyjazne dla użytkownika.

najlepszym sposobem na to jest:

<a href="#" onclick="someFunction(e)"></a>

Problem polega na tym, że spowoduje to dodanie skrótu (#) na końcu adresu URL strony w przeglądarce, co wymaga od użytkownika dwukrotnego kliknięcia przycisku Wstecz, aby przejść do strony przed Twoją. Biorąc to pod uwagę, musisz dodać trochę kodu, aby zatrzymać propagację zdarzeń. Większość zestawów narzędzi javascript będzie już mieć do tego funkcję. Na przykład używa zestawu narzędzi dojo

dojo.stopEvent(event);

aby to zrobić.

Najlepsza odpowiedź to bardzo zła praktyka, nigdy nie należy nigdy łączyć z pustym hashem, ponieważ może to powodować problemy w przyszłości.

Najlepiej jest powiązać moduł obsługi zdarzeń z elementem, jak twierdzi wiele innych osób, <a href="javascript:doStuff();">do stuff</a>działa jednak doskonale w każdej nowoczesnej przeglądarce i używam go szeroko podczas renderowania szablonów, aby uniknąć konieczności ponownego wiązania dla każdej instancji. W niektórych przypadkach takie podejście zapewnia lepszą wydajność. YMMV

Kolejny interesujący kawałek ...

onclicki hrefzachowują się inaczej podczas bezpośredniego wywoływania javascript.

onclickprzekaże thiskontekst poprawnie, podczas gdy hrefnie, lub innymi słowy <a href="javascript:doStuff(this)">no context</a>nie będzie działać, podczas gdy <a onclick="javascript:doStuff(this)">no context</a>będzie.

Tak, pominąłem href. Chociaż nie jest to zgodne ze specyfikacją, będzie działać we wszystkich przeglądarkach, chociaż najlepiej, aby zawierało href="javascript:void(0);"dobrą miarę

Posiadanie javascript:dowolnego atrybutu, który nie jest specjalnie przeznaczony do skryptowania, jest przestarzałą metodą HTML. Chociaż technicznie to działa, nadal przypisujesz właściwości javascript do atrybutu innego niż skrypt, co nie jest dobrą praktyką. Może nawet zawieść w starych przeglądarkach, a nawet w niektórych współczesnych (zrewidowany post na forum wydaje się wskazywać, że Opera nie lubi adresów „javascript:”).

Lepszym rozwiązaniem byłby drugi sposób, aby umieścić javascript w onclickatrybucie, który jest ignorowany, jeśli nie jest dostępna żadna funkcja skryptowa. Umieść poprawny adres URL w polu href (zwykle „#”), aby utworzyć rezerwę dla tych, którzy nie mają javascript.

działało dla mnie przy użyciu tego wiersza kodu:

<a id="LinkTest" title="Any Title"  href="#" onclick="Function(); return false; ">text</a>

To działa

<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>

Osobiście uważam, że umieszczanie wywołań javascript w tagu HREF jest denerwujące. Zazwyczaj tak naprawdę nie zwracam uwagi na to, czy coś jest linkiem javascript, czy nie, i często chcę otwierać rzeczy w nowym oknie. Kiedy próbuję to zrobić za pomocą jednego z tego rodzaju linków, otrzymuję pustą stronę, na której nic nie ma, i javascript na pasku lokalizacji. Jest to jednak nieco pomijane przy użyciu onlick.

Jeszcze jedna rzecz, którą zauważyłem podczas używania „href” z javascript:

Skrypt w atrybucie „href” nie zostanie wykonany, jeśli różnica czasu między 2 kliknięciami będzie dość krótka.

Na przykład spróbuj uruchomić następujący przykład i kliknij dwukrotnie (szybko!) Na każdym linku. Pierwszy link zostanie wykonany tylko raz. Drugie łącze zostanie wykonane dwukrotnie.

<script>
function myFunc() {
    var s = 0;
    for (var i=0; i<100000; i++) {
        s+=i;
    }
    console.log(s);
}
</script>
<a href="javascript:myFunc()">href</a>
<a href="#" onclick="javascript:myFunc()">onclick</a>

Reprodukcja w Chrome (podwójne kliknięcie) i IE11 (trzykrotne kliknięcie). W Chrome, jeśli klikniesz wystarczająco szybko, możesz wykonać 10 kliknięć i wykonać tylko jedną funkcję.

Firefox działa dobrze.

Po pierwsze, wprowadzenie adresu URL href najlepiej jest ponieważ pozwala on użytkownikom kopiować linki, otwierać na innej karcie itp.

W niektórych przypadkach (np. Witryny z częstymi zmianami HTML) nie jest praktyczne wiązanie linków za każdym razem, gdy jest aktualizacja.

Typowa metoda wiązania

Normalny link:

<a href="https://www.google.com/">Google<a/>

I coś takiego dla JS:

$("a").click(function (e) {
    e.preventDefault();
    var href = $(this).attr("href");
    window.open(href);
    return false;
});

Zaletami tej metody są czyste oddzielenie znaczników i zachowania i nie trzeba powtarzać wywołań funkcji w każdym łączu.

Brak metody wiązania

Jeśli jednak nie chcesz wiązać się za każdym razem, możesz użyć onclick i przekazać element i zdarzenie, np .:

<a href="https://www.google.com/" onclick="return Handler(this, event);">Google</a>

A to dla JS:

function Handler(self, e) {
    e.preventDefault();
    var href = $(self).attr("href");
    window.open(href);
    return false;
}

Zaletą tej metody jest to, że możesz ładować nowe linki (np. Przez AJAX), kiedy chcesz, bez konieczności martwienia się o wiązanie za każdym razem.

 <hr>
            <h3 class="form-signin-heading"><i class="icon-edit"></i> Register</h3>
            <button data-placement="top" id="signin_student" onclick="window.location='signup_student.php'" id="btn_student" name="login" class="btn btn-info" type="submit">Student</button>
            <div class="pull-right">
                <button data-placement="top" id="signin_teacher" onclick="window.location='guru/signup_teacher.php'" name="login" class="btn btn-info" type="submit">Teacher</button>
            </div>
        </div>
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_student').tooltip('show'); $('#signin_student').tooltip('hide');
                });
            </script>   
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_teacher').tooltip('show'); $('#signin_teacher').tooltip('hide');
                });
            </script>   

Zauważyłem, że javascript: hrefs nie działał, gdy strona została osadzona w funkcji strony internetowej Outlooka, gdzie folder poczty jest ustawiony na wyświetlanie adresu URL