SORU
5 Mayıs 2014, PAZARTESİ


Nasıl Chrome Geliştirici Araçları kullanarak düğme/elemanı tarafından çalıştırılan bulmak için

Chrome ve kendi web sitemi kullanıyorum.

Ne ben içinden biliyorum:

1İnsanlar bu portakal görüntü düğmesi ile kayıt olduğu bir form var:

enter image description here

2) Kontrol ediyorum, ve bu hepsi: <img class="formSend" src="images/botoninscribirse2.png">

3Kaynak kodunun üst kısmında, komut kaynakların ton vardır.Bu tabi ki, düğmesine çağıran biliyorum: 2**

4) Bu dosyanın içinde bulabilirsin: düğmesi (oldukça karmaşık bir form doğrulama yapmak ve sunmak) tarafından tetiklenir hangi . $(".formSend").click(function() { ... }); ^strong>istediğim şey bulmak mümkünherhangi bir web sitesinde chrome geliştirici araçları kullanarak.

Tamam, bunu biliyoruz. Şimdi, izin gibi bir yabancı için:


Dinleyiciler sekme benim için işe yaramadı

Öyleyse denedim görünümlü tıklayın olay dinleyicileri, hangi göründü gibi güvenli bir bahis bana ama... yok jquery2.js orada (ve ben hiç bilmiyorum hangi dosya kodu olurdum zaman kaybı kontrol tüm bunlar...):

enter image description here

jquery2.js dosya içinde $(".formSend").click(function() { ... }); görevim yok.

Jesse açıklarnedendown in his answer:

"Son olarak, işlev doğrudan tıklatın olay işleyicisi bağlı değil neden bir WordPress kullanmak verdiğinden bağlı alacak olan bir işlevdir. sırayla jQuery fonksiyonu bazı soyutlama katmanları ve denetler geçer ve orada bir yerde işlevini yürütür."

DÜZENLEME:Bu soru bazılarının önerdiği gibi in one answer down below ortaya çıkan tüm yöntemleri bir araya getirdik.

CEVAP
7 Mayıs 2014, ÇARŞAMBA


Alexander Pavlov's answer istediğin en yakın alır.

JQuery soyutlama ve işlevsellik yaygınlığı nedeniyle, çemberler bir sürü sipariş durumunda et almak için atladı. Çalışmalarını göstermek için jsFiddle Bu kurdunuz.


1. Olay Dinleyici ayarlama Kesme

Bu kadar yakındın.

  1. Chrome Dev Tools (F12) açın ve Kaynakları sekmesine gidin.
  2. Fare aşağı matkap ->Tıklayın
    Chrome Dev Tools -> Sources tab -> Mouse -> Click
    (zoom için tıklayın)

2. Düğmesini tıklayın!

Chrome Dev Tools komut dosyası yürütme duraklatma ve minified kod bu güzel dolanması size sunacak:

Chrome Dev Tools paused script execution (zoom için tıklayın)


3. Şanlı kodunu bulmak!

Şimdi, olay buradadeğil kapılmaktuşuna basarak, ve ekranda bir göz dışarıda tutmak.

  1. BasınF11kaynak kodu görünür istediğiniz kadar anahtar (Adımda)
  2. Kaynak sonunda ulaştı kodu
    • jsFiddle örnek yukarıda verilen, basın zorunda kaldımF11108 kezistenen olay ulaşmadan önce/işleyici işlevi
    • Sizin kilometre, DV sürümü (veya çerçeve kitaplığı) olayları bağlamak için kullanılan bağlı olarak değişebilir
    • Yeterli özveri ve zaman ile, bulabilirsinizherhangi birolay işleyicisi/işlev

Desired event handler/function


4. Açıklama

Yok kesin bir cevap veya açıklama olarak neden bir WordPress kullanmak çektiği birçok katmandan soyutlamalar yapar - Ben önermek olduğunu çünkü bu iş için soyut uzakta kullanımı tarayıcı çalıştırma kodu.

Burada bir WordPress kullanmak bir hata ayıklama sürümü ile jsFiddle (yani, değil minified). (Non-minified) ilk kesme noktası kodu baktığınızda, kod pek çok şeyi ele olduğunu görebilirsiniz:

    // ...snip...

    if ( !(eventHandle = elemData.handle) ) {
        eventHandle = elemData.handle = function( e ) {
            // Discard the second event of a jQuery.event.trigger() and
            // when an event is called after a page has unloaded
            return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
                jQuery.event.dispatch.apply( elem, arguments ) : undefined;
        };
    }

    // ...snip...

O zaman denemenizde kaçırdın sanırım sebebi "yürütme duraklatır ve satır satır atlıyorum", ""işlevi yerine, Adım. Adım olabilir çünkü. Burada farkları açıklayan StackOverflow answer.

Son olarak, işlev sebebideğilclick olayı ile doğrudan ilişkili işleyicisi çünkü bir WordPress kullanmak döndürür ilişkili alır bir işlev. sırayla jQuery fonksiyonu bazı soyutlama katmanları ve denetler geçer, vebir yereorada, senin işlevini yürütür.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Elliot Davin

    Elliot Davin

    28 Kasım 2008
  • TastyTuts | Creative video tutorials by Gareth David

    TastyTuts |

    6 Temmuz 2011
  • TeachMeComputer

    TeachMeCompu

    31 EKİM 2009