Web sitesinin olağan eylemlerini tetiklemenin bir tıklamasını durdurabilir miyim?

Question

React.js ile bir deneme olarak, belirli sitelere giriş alanı (ve şimdi de bir düğme) enjekte etmek için bir içerik komut dosyası kullanan bir krom uzantısı oluşturmaya çalışıyorum. Bu durumda, Twitter'a enjekte etmeye çalışıyorum. Bu şuna benzer: kod metnin altında düğmesi ve giriş koyar unutmayın, ancak aynı sonucu

enjeksiyon işleri olacak, ama aslında girişini kullanamazsınız. Öğeyi ana sayfadaki tweet'lere enjekte ediyorum ve giriş yapmak için girişe tıkladığımda tweet'i tetikler ve genişler veya daralır. Bu, odağı giriş işlemeden kaldırır ve işe yaramaz. onBlur ve stopPropagation()onClick odağını aramayı denedim ancak onClick tetiklenmedi ve ben onBlur ile odağı nasıl geri getireceğimi bilmiyorum. Odağı kaybetmeyi nasıl durdurabilirim? bunu kendiniz test etmek isterseniz

, tepki-ile-addons.js marş kiti geldi here

DÜZENLEME: Bunu tıklayarak misin diye koduna düğmesi ekleyerek çalıştı, görülmesi ve Yapabilirim. Tweet'in kendisini tetiklemek için üzerine tıklayabilirim. Bu, giriş kutusuna sorun çıkartan belirli bir şey olduğu veya düğmenin tıklatmanın yayılmasını engelleyen bir şey olduğu anlamına gelir. Bir girdi alanına tıkladığınızda, tweet'lerin sahip olabileceği diğer öğelerin bulunmadığı özel bir şey var mı?

DÜZENLEME 2: Şimdi, artık bir div'e stopPropagation eklemeyi ve z dizinini artırmayı denedim, bunların hiçbiri bunu durduramaz.

DÜZENLEME 3: Artık, eşzamanlama olmaksızın, StopPropagation ile, eşzamanlamayı (ve onMouseUp ve onClick, aynı anda) denedim. Garip kısmı denedim sonra PropagationStopped() ve doğru döndürür. Eğer öyleyse Twitter neden hala tetikleniyor?

test_input.js

/** 
* @jsx React.DOM 
*/ 
var Test_Input = React.createClass({ 
    maintain_focus: function(){ 
     e.stopPropagation(); 
     console.log("====="); 
    }, 
    refocus: function(e){ 
     e.stopPropagation(); 
    }, 
    handle_click: function{ 
     console.log("clicked"); 
    } 
    render: function(){ 
     return (<div> 
         <button onclick={this.handle_click}> 
         <input className="new_note_input" placeholder="Note" onclick={this.maintain_focus} onBlur={this.refocus}></input> 
        </div>); 
    } 
}); 
var elements_to_append_to = document.getElementsByClassName('content'); 
[].forEach.call(elements_to_append_to, function(element){ 
    var container = $("<span />"); 
    $(element).after(container); 
    React.renderComponent(<Test_Input />, container[0]); 
}); 

manifest.json

{ 
    "name": "Test Input", 
    "version": "0.1", 
    "manifest_version": 2, 
    "permissions": ["tabs", "bookmarks", "declarativeWebRequest", "*://*/*"], 
    "content_scripts": [ 
     { 
      "matches": [ "https://twitter.com/*"], 
      "css":["src/social_notes.css"], 
      "js":[ "build/jquery-2.1.0.min.js", "build/react-with-addons.js", "build/test_input.js"] 
     } 
    ] 
} 

Answer 1

e.stopPropagation() çalışır. Giriş alanı tıklaması varsayılan davranışı tetiklediğinden, giriş kutusunda return false; bulunan e.preventDefault(), e.preventDefault() yerine tıklatma işlemi yapmalısınız. İşleyicide, yanlış dönmeden önce $(this).focus(); yapın. Bu, metin kutusunu odakta tutacaktır.

örn:

$(".inputField").on("click", function(e){ 
    e.preventDefault(); 
    $(this).focus(); 
    return false; 
}) 

Answer 2

deneyin div sen ekliyorsanız ve böyle işleyicideki e.stopPropagation() yapmak bir tık işleyicisi ekleyerek:

/** 
* @jsx React.DOM 
*/ 
var Test_Input = React.createClass({ 
    maintain_focus: function(){ 
     e.stopPropagation(); 
     console.log("====="); 
    }, 
    refocus: function(e){ 
     e.stopPropagation(); 
    }, 
    handle_click: function(){ 
     console.log("clicked"); 
    }, 
    div_click: function(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
    }, 
    render: function(){ 
     return (<div onclick={this.div_click}> 
         <button onclick={this.handle_click}> 
         <input className="new_note_input" placeholder="Note" onclick={this.maintain_focus} onBlur={this.refocus}></input> 
        </div>); 
    } 
}); 
var elements_to_append_to = document.getElementsByClassName('content'); 
[].forEach.call(elements_to_append_to, function(element){ 
    var container = $("<span />"); 
    $(element).after(container); 
    React.renderComponent(<Test_Input />, container[0]); 
}); 

BTW, kodunuzda bazı sözdizimi hataları var. Olay işleyicilerinde