Can I stop a click from starting normal actions on a website?

Question

As an experiment with React.js, I am trying to build a chrome extension that uses script content to enter an input field (and now buttons) on certain websites. In this case, I am trying to post it on Twitter. It looks like this: note that the code puts a button and enters below the text, but it will have the same result

Injection works, but I can not use the input. I insert an element into tweets on the home page, and when I press enter to enter it, it launches a tweet and expands or contracts. This removes focus from the input, making it useless. I tried to call back focus onBlur and stopPropagation() onClick , but onClick does not start, and I'm not sure how to return focus using onBlur . How can I stop losing focus?

If you want to test it yourself, the-with-addons.js reaction came from the starter kit here

EDIT: I tried adding code to the code to see if I can click on it, and I can. I can click on it without starting the tweet itself. This means that there is something specific to the input window that causes problems, or something in the button that blocks the spread of the click. Is there anything special caused when you click on an input field that other elements don't have that tweets can have?

EDIT 2: I tried adding stopPropagation to the containing div and increasing its z-index, none of them would stop it.

EDIT 3: I now tried onMouseDown (both onMouseUp and onClick, all at the same time) with stopPropagation, with no luck. The strange part is an attempt to isPropagationStopped () after this, and it returns true. If so, why is Twitter still running?

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 () works with event handlers. Since the input box triggers the default behavior, instead of e.stopPropagation() , e.preventDefault() with return false; in the input field, the click handler should do the trick.

In the handler, execute $(this).focus(); before returning false. This will keep the text box in focus.

eg:

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

Answer 2

Try adding a click handler to the div you are inserting and do e.stopPropagation() in the handler, for example:

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

By the way, there are syntax errors in your code.