Question

我正在制作一个简单的Chrome扩展程序，它将GMail作曲家中的一个可信任的div放入收听键盘事件的电子邮件正文中，并提供一些有用的类型帮助。基本的想法是，在您发送电子邮件后，电子邮件中只剩下div而没有类型帮助。但是，当插入键盘事件时，我无法使插入的div捕获键盘事件。如果插入到GMail之外的其他站点，它就可以工作。

将div元素插入到邮件正文中：

// create div element:
var element = document.createElement ("div");
element.setAttribute ('contenteditable', true);
element.innerText = "sample text";
element.addEventListener ("input", function (event) {
    console.log ('Input event caught'); // this never fires
}, true);
// insert it at the cursor:
var sel = window.getSelection();
var range = sel.getRangeAt (0);
range.deleteContents ();
range.insertNode (element);

此代码部分位于名为gmail-inline.js的文件中。我还在清单中放了“all_frames”：true：

{
  "name": "extension",
  "manifest_version": 2,
  "description": "description",
  "version": "0.1",
  "background": { "page": "background.html" },
  "browser_action": {
    "default_icon": {
        "19": "images/icon19.png",
        "38": "images/icon38.png"
    },
    "default_title": "test"
  },
  "content_scripts": [
    {
        "matches": ["*://*/*"],
        "all_frames": true,
        "js": [
            "gmail-inline.js"
        ],
    }
  ],
  "permissions": [
    "tabs"
  ]
}

运行脚本时，div很好地出现在电子邮件正文中。根据Chrome开发人员工具中的事件监听器，事件附加到元素，它不会以某种方式触发。我认为可能是其他事件处理程序阻止事件进入此脚本，因此我将事件侦听设置为在捕获阶段完成，但仍然没有。

我做了一些研究，发现了类似的问题和答案，但没有回答这个案例。将事件处理程序直接附加到元素而不是文档似乎是不常见的。这似乎是一个好主意，否则我必须处理GMail的深iframe结构，并动态地将监听器分配给产生iframe。那我该怎么办？

Answer 1

这是因为另一个contenteditable元素中的contenteditable元素没有被考虑，因为它得到了焦点，只是以父母为中心。而焦点意味着听键盘事件。所以要修复你应该做的将div设为contenteditable=false，并在div内创建另一个contenteditable=true 这样：

var element = document.createElement ("div");
element.setAttribute ('contenteditable', false);
var helper = document.createElement ("div");
helper.setAttribute ('contenteditable', true);
helper.style.width = '100%'; 
...
element.appendChild(helper);
helper.innerText = "sample text";
helper.addEventListener ("input", function (event) {
    console.log ('Input event caught'); // this now fires
}, true);

addeventlistener没有在gmail的chrome扩展中捕获事件

1 个答案: