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

Question

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

注入(inject)有效，但我实际上无法使用输入。我将该元素注入(inject)到主页上的推文中，当我点击输入框输入内容时，它会触发推文并展开或收缩。这会从输入中移除焦点，使其变得无用。我试图回调焦点 onBlur 和 stopPropagation() onClick，但是 onClick 没有被触发并且我不确定如何使用 onBlur 恢复焦点。我怎样才能停止注意力不集中？

如果您想自己测试，react-with-addons.js 来自入门工具包 here

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

编辑 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]);
});

list .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;框点击处理程序应该可以解决问题。

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

例如:

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