웹 사이트의 일반적인 행동을 유발하는 클릭이 중지 될 수 있습니까?

Question

React.js를 사용한 실험으로 콘텐츠 스크립트를 사용하여 특정 웹 사이트에 입력 필드 (그리고 지금은 버튼)를 삽입하는 크롬 확장을 구축하려고합니다. 이 경우 Twitter에 삽입하려고합니다. 그것은 다음과 같습니다 코드는 텍스트 아래의 버튼 입력을두고 있음을 유의하시기 바랍니다,하지만 동일한 결과를

주입 작업을해야하지만 실제로 입력을 사용할 수 없습니다. 요소를 홈 페이지의 트윗에 삽입하고 입력을 클릭하여 입력하면 트윗이 표시되고 확장되거나 축소됩니다. 이렇게하면 입력에서 포커스를 제거하여 쓸모 없게 만듭니다. 초점 onBlur과 stopPropagation()onClick을 다시 호출하려고 시도했지만 onClick이 실행되지 않으며 초점을 다시 onBlur으로 가져 오는 방법을 모르겠습니다. 초점을 잃는 것을 어떻게 멈출 수 있습니까? 당신은 스스로를 테스트하려면

, 반응 -와 - addons.js이 스타터 키트에서 온 here

편집 : 나는 그 클릭 수 있다면 코드에 버튼을 추가하는 시도가 참조하고 저 할 수 있어요. 나는 트윗 자체를 방아쇠를 당기지 않고 클릭 할 수있다. 즉, 입력 상자에 문제가있는 특정 항목이 있거나 버튼에 클릭이 전파되는 것을 차단하는 것이 있습니다. 트윗에 포함되지 않은 다른 요소가있는 입력 필드를 클릭 할 때 특별한 트리거가 있습니까?

EDIT 2 : 이제는 포함 된 div에 stopPropagation을 추가하고 Z- 색인을 늘리려고 시도했지만 둘 중 어느 것도 중지하지 않았습니다.

EDIT 3 : 나는 행운이없는 상태에서 onMouseDown (및 onMouseUp 및 onClick, 동시에)을 stopPropagation과 함께 사용해 보았습니다. 이상한 부분은 나중에 isPropagationStopped()를 시도한 후 true를 반환합니다. 이것이 그렇다면 트위터가 여전히 트리거되는 이유는 무엇입니까?

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()은 이벤트 처리기에서 작동합니다. 입력 필드 클릭 동작이 e.stopPropagation() 대신 기본 동작을 트리거하기 때문에 입력 상자 클릭 핸들러에 return false;이있는 e.preventDefault()이있는 트릭을 수행해야합니다.

처리기에서 false를 반환하기 전에 $(this).focus();을 수행하십시오. 이렇게하면 텍스트 상자에 포커스가 유지됩니다.

예 :

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

Answer 2

시도 div 당신은 삽입하고이 같은 핸들러에 e.stopPropagation()을에 클릭 핸들러를 추가 :

/** 
* @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]); 
}); 

의견 : 코드에 구문 오류가 있습니다.