我可以阻止点击触发网站的常规操作吗？

Question

作为React.js的实验,我正在尝试构建一个chrome扩展,它使用内容脚本将输入字段(现在也是一个按钮)注入某些网站.在这种情况下,我试图将其注入Twitter.它看起来像这样: 请注意,代码将按钮和输入放在文本下方,但结果会相同

注射工作,但我实际上不能使用输入.我将元素注入主页上的推文,当我点击输入键入它时,它会触发推文并扩展或收缩.这会从输入中删除焦点,使其无效.我试图回调焦点onBlur,并且stopPropagation() onClick,但是onClick没有触发,我不确定如何恢复焦点onBlur.我怎么能不再失去焦点？

如果你想自己测试了一下,反应与- addons.js从入门工具包来到这里

编辑:我尝试在代码中添加按钮,看看我是否可以点击它,我可以.我可以点击它而不会触发推文本身.这意味着输入框中存在某些特定的问题,或者按钮中的某些内容阻止了点击的传播.当您点击其他元素没有推文可能有的输入字段时,是否有某些特殊触发？

编辑2:我现在尝试将stopPropagation添加到包含div并增加它的z-index,它们都不会停止它.

编辑3:我现在尝试使用stopPropagation onMouseDown(以及onMouseUp和onClick,同时),没有运气.奇怪的是我之后尝试了isPropagationStopped(),它返回true.如果是这样,为什么Twitter仍然被触发？

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()在输入框中e.preventDefault()使用return false;单击处理程序应该可以解决问题。

在处理程序中，$(this).focus();在返回 false 之前执行 a 操作。这将使文本框保持焦点。

例如：

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