Question

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

注射工作，但我实际上无法使用输入。我将元素注入主页上的推文，当我点击输入键入它时，它会触发推文并扩展或收缩。这会从输入中删除焦点，使其无效。我曾尝试回拨焦点onBlur和stopPropagation() onClick，但onClick未被触发，我不确定如何将重点放回{{1 }}。我怎么能不再失去焦点？

如果您想自己测试一下，react-with-addons.js来自入门套件here

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

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

编辑3：我现在尝试使用stopPropagation onMouseDown（以及onMouseUp和onClick，所有这些），没有运气。奇怪的是我之后尝试了isPropagationStopped（），它返回true。如果是这样，为什么Twitter仍然被触发？

test_input.js

onBlur

的manifest.json

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

Answer 1

e.stopPropagation()适用于事件处理程序。由于输入字段点击触发默认行为，而不是e.stopPropagation()，e.preventDefault()在输入框中点击处理程序return false;应该可以解决问题。

在处理程序中，在返回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]);
});

顺便说一句，您的代码中存在一些语法错误。

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

2 个答案: