Herhangi bir yönlendirme olmadan bir tıklamayla basit bir JavaScript işlevi çalıştırmak istiyorum.

JavaScript çağrısını hrefözniteliğe koymak arasında herhangi bir fark veya fayda var mı (şöyle:

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

) onclicközniteliğe koyma ( onclicketkinliğe bağlama )?

Onclick'i href içine koymak, içeriğin davranış / eylemden ayrılmasına şiddetle inananları rahatsız edecektir. Argüman, html içeriğinizin sunum veya davranışa değil yalnızca içeriğe odaklanmış olması gerektiğidir.

Günümüzde tipik bir yol, bir javascript kütüphanesi (örn. Jquery) kullanmak ve bu kütüphaneyi kullanarak bir olay işleyici oluşturmaktır. Şöyle bir şey olurdu:

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

kötü:

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

iyi:

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

daha iyi:

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

daha da iyisi 1:

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

daha da iyisi 2:

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

Neden daha iyi? çünkü return falsetarayıcının bağlantıyı izlemesini engelleyecek

en iyi:

Onclick işleyicisini öğenin kimliğine göre eklemek için jQuery veya benzeri bir çerçeve kullanın.

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

Javascript açısından bir fark, işleyicideki thisanahtar kelimenin özniteliği (bu durumda öğe) onclickolan DOM öğesine başvururken , öznitelikte nesneye başvurmasıdır .onclick<a>thishrefwindow

Sunum açısından, hrefbir bağlantıda bir öznitelik yoksa (yani <a onclick="[...]">), varsayılan olarak, tarayıcılar bir bağlantı olarak değil, bir bağlantı olarak ele alındığından textimleci (sıkça istenen pointerimleci değil) görüntüler <a>.

Davranış açısından href, tarayıcı üzerinden gezinme yoluyla bir eylem belirtirken, tarayıcı genellikle hrefbir kısayol veya bağlam menüsü kullanarak bunu ayrı bir pencerede açmayı destekler . Yalnızca üzerinden bir eylem belirtilirken bu mümkün değildir onclick.

Ancak, bir DOM nesnesinin tıklamasından dinamik eylem almanın en iyi yolunun ne olduğunu soruyorsanız, belgenin içeriğinden ayrı olarak javascript kullanarak bir etkinlik eklemek en iyi yoldur. Bunu çeşitli şekillerde yapabilirsiniz. Ortak bir yol, bir olayı bağlamak için jQuery gibi bir javascript kitaplığı kullanmaktır:

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

kullanırım

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

Uzun bir yol var ama işi hallediyor. basitleştirmek için bir A stili kullanın, sonra olur:

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

Tüm bunlara ek olarak, href tarayıcının durum çubuğunda gösterilir ve tıklamaz. Ben orada javascript kodu göstermek için kullanıcı dostu olmadığını düşünüyorum.

Bunu yapmanın en iyi yolu şudur:

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

Sorun, bu sayfanın tarayıcıdaki URL'sinin sonuna bir karma (#) ekleyecektir, böylece kullanıcının sizden önceki sayfaya gitmek için geri düğmesini iki kez tıklamasını gerektirir. Bu göz önüne alındığında, olayın yayılmasını durdurmak için bir kod eklemeniz gerekir. Javascript araç takımlarının çoğu bunun için zaten bir işleve sahip olacaktır. Örneğin, dojo araç seti aşağıdakileri kullanır:

dojo.stopEvent(event);

böyle yaparak.

En iyi cevap çok kötü bir uygulamadır, hiç kimse boş bir karmaya bağlanmamalıdır çünkü yolda sorun yaratabilir.

En iyisi, diğer birçok kişinin belirttiği gibi bir olay işleyiciyi öğeye bağlamaktır, ancak <a href="javascript:doStuff();">do stuff</a>her modern tarayıcıda mükemmel çalışır ve her örnek için yeniden hatırlamak zorunda kalmamak için şablonlar oluştururken bunu yoğun olarak kullanırım. Bazı durumlarda, bu yaklaşım daha iyi performans sunar. YMMV

Bir başka ilginç tid-bit ....

onclick& hrefjavascript'i doğrudan çağırırken farklı davranışlar sergileyin.

onclickthisbağlamı doğru bir şekilde geçirecek , oysa çalışmayacak hrefveya başka bir deyişle <a href="javascript:doStuff(this)">no context</a>çalışmayacak <a onclick="javascript:doStuff(this)">no context</a>.

Evet, atladım href. Bu spesifikasyonu takip etmese de, tüm tarayıcılarda çalışacaktır, ancak ideal href="javascript:void(0);"olarak iyi bir önlem için bir

javascript:Özellikle komut dosyası oluşturma için olmayan herhangi bir özelliğe sahip olmak , eski bir HTML yöntemidir. Teknik olarak çalışırken, hala komut dosyası olmayan bir özniteliğe javascript özellikleri atarsınız, bu da iyi bir uygulama değildir. Eski tarayıcılarda ve hatta bazı modern tarayıcılarda bile başarısız olabilir (bir googled forum yazısı Opera'nın 'javascript:' urls'den hoşlanmadığını gösterir).

Javascript'inizi onclickherhangi bir komut dosyası işlevselliği yoksa göz ardı edilen özelliğe koymak için ikinci yol daha iyi bir uygulamadır . Javascript olmayanlar için geri dönüş için href alanına (genellikle '#') geçerli bir URL yerleştirin.

bu kod satırını kullanarak benim için çalıştı:

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

Bu çalışıyor

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

Şahsen, HREF etiketine javascript çağrıları rahatsız edici buluyorum. Genellikle bir şeyin javascript bağlantısı olup olmadığına gerçekten dikkat etmiyorum ve çoğu zaman bir şeyleri yeni bir pencerede açmak istiyorum. Bunu bu tür bağlantılardan biri ile yapmaya çalıştığımda, üzerinde hiçbir şey ve konum çubuğumdaki javascript ile boş bir sayfa alıyorum. Ancak, bu bir onlick kullanılarak biraz kaldırılır.

Javascript ile "href" kullanırken fark bir şey daha:

2 tıklama arasındaki zaman farkı oldukça kısaysa "href" özelliğindeki komut dosyası yürütülmez.

Örneğin, aşağıdaki örneği çalıştırmayı deneyin ve her bağlantıya çift tıklayın (hızlı!). İlk bağlantı yalnızca bir kez yürütülür. İkinci bağlantı iki kez yürütülür.

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

Chrome (çift tıklama) ve IE11 (üçlü tıklama ile) olarak üretilmiştir. Chrome'da yeterince hızlı tıklarsanız 10 tıklama yapabilir ve yalnızca 1 işlev yürütme yapabilirsiniz.

Firefox çalışıyor.

İlk olarak, URL'nin girilmesi hrefen iyisidir çünkü kullanıcıların bağlantıları kopyalamasına, başka bir sekmede açmasına vb.

Bazı durumlarda (örneğin, sık HTML değişikliklerine sahip siteler), her güncelleme olduğunda bağlantıları bağlamak pratik değildir.

Tipik Bağlama Yöntemi

Normal bağlantı:

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

Ve JS için böyle bir şey:

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

Bu yöntemin faydaları, biçimlendirme ve davranışın temiz bir şekilde ayrılmasıdır ve her bağlantıda işlev çağrılarını tekrarlamak zorunda değildir.

Bağlanma Yöntemi Yok

Bununla birlikte, her seferinde ciltlemek istemiyorsanız, onclick öğesini kullanabilir ve öğeyi ve etkinliği aktarabilirsiniz, örneğin:

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

Ve bu JS için:

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

Bu yöntemin yararı, her seferinde ciltleme konusunda endişelenmenize gerek kalmadan istediğiniz zaman yeni bağlantılar (örneğin AJAX aracılığıyla) yükleyebilmenizdir.

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

Javascript: hrefs sayfa Outlook'un bir posta klasörü yerine bir url göstermek için ayarlanmış olduğu web sayfası özelliğine katıştırılmış zaman işe yaramadı