onpaste / paste 事件在前几次尝试中未触发 table

Question

Google Chrome 具体 - 这是一个内部使用的应用程序不需要跨浏览器兼容性

我有一个 table 试图允许粘贴数据。我这样选择了单个单元格table：

<td tabindex="0">

我最初尝试将 onpaste 事件添加到 TD 元素本身，但这根本不起作用。因此，我将事件添加到 table 元素并检查以确保焦点元素是 TD，然后将数据粘贴到该元素：

document.getElementById("tblData").onpaste = function(evt){
    if(document.querySelector(":focus").tagName.toLowerCase() != "td"){
        return;
    }

    document.querySelector(":focus").innerText = evt.clipboardData.getData("text/plain");
};

虽然这确实有效，但事件通常不会在第一次尝试时触发。看来我需要要么 a) 在 table 中点击随机次数（每次都不同），要么 b) 将焦点切换到另一个 window，然后在事件触发前再次返回。在 jsFiddle 中，我在事件的最开始添加了一个 console.log() 调用，以便我可以准确地看到事件在调试窗格中触发的时间。

查看上面的 jsFiddle 或仅查看 https://jsfiddle.net/spetnik/vpcyt4yv/embedded/result/

处的结果

Answer 1

哇。罪魁祸首似乎是-webkit-user-select/user-selectCSS！当我注意到只有在最初单击并将鼠标拖到单元格上后才允许粘贴时，我发现了这一点（这解释了随机单击 - 只有在我单击直到我的鼠标移动到中间单击才有效）。我删除了这个 CSS 现在它可以工作了。当然，现在我需要找到一个解决方法来防止 selecting，但至少我不再难过。

编辑： 似乎在普通元素上（例如 DIV 将 onpaste 设置为元素本身）当 -webkit 时 onpaste 根本不起作用-user-select 设置为 none。我提交了错误报告 here

编辑 2： 我设法找到了以下解决方法：如果我在按下 Ctrl-V 之前以编程方式 select 单元格的内容，那么它将工作，即使 -webkit-user-select 设置为 none。我通过将以下事件处理程序（此处显示的 jQuery）添加到 TD 来完成此操作（这在 -webkit-user-select 设置为 [= 的独立 DIV 中仍然不起作用28=]):

$(elem).click(function(evt){
    var selection = window.getSelection();            
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
})

onpaste / paste 事件在前几次尝试中未触发 table

onpaste / paste event not firing for table on first few attempts

javascript

events

google-chrome

onpaste