为什么单独的“粘贴”事件侦听器都粘贴到同一个<div>?

时间:2018-01-09 18:49:18

标签: javascript html css google-chrome

至少在Chrome for Windows的最新版本中,粘贴事件监听器给了我不一致的结果。

我正在尝试从屏幕上的两个列分区侦听粘贴事件,并允许用户将文本粘贴到一列或另一列,具体取决于他/她最后点击的位置。出于某种原因,粘贴的文本总是转到右侧列。

有人指出,我可以使用<input>代替<p>,但是一旦用户粘贴了文字,我希望我的脚本能够回复粘贴文字的点击字词和AFAIK {{ 1}}不允许这样做。

感谢任何经验,帮助或解决方法,谢谢。

Live Demo

使用Chrome浏览器版本63.0.3239.132进行测试,在Windows 7 Pro下,最新版本是在Ubuntu下的Chromium。

更新,1/12/18:

advice from @Grant(下方)之后,我将内容插入到我的两个<input>中,Chrome开始接受两者的粘贴操作。此外,Firefox在窗口的任何地方都没有响应粘贴操作,现在也开始接受了 将文字粘贴到两列。

与此同时,我在这里发布的示例仍然适用,我想知道原因:这是“预期”行为,还是这些浏览器粘贴事件的实现问题?

<div>
// Listen for "paste" events in each column:
//
document.getElementById("leftColumn").addEventListener("paste", leftPaste, false);
document.getElementById("rightColumn").addEventListener("paste", rightPaste, false);

// todo: for some reason leftPaste() is not triggered:
//
function leftPaste(e) {
    var clipboardData, pastedData;
    clipboardData = e.clipboardData;
    pastedData = clipboardData.getData('Text');
    alert(pastedData);
    document.getElementById('leftPara').textContent = pastedData;
}

function rightPaste(e) {
    var clipboardData, pastedData;
    clipboardData = e.clipboardData;
    pastedData = clipboardData.getData('Text');
    alert(pastedData);
    document.getElementById('rightPara').textContent = pastedData;
}
body {
    color : #334455;
    background-color: #aabbcc;
    font-family: 'PT Sans', sans-serif;
    font-size : 14px;
    cursor : default;
}

.frame {
    border: 1px solid rgb(31, 40, 49);
    background-color : #283849;
    color : #aabbcc;
    overflow: auto;
    position: relative;
}

.myColumn {
    height: 90vh;
    overflow: auto; /*causes scrollbars*/
    float: left;
    width: 45%;
    margin-left: 4%;
}

1 个答案:

答案 0 :(得分:1)

我无法明确地告诉你为什么这种行为是这样的 - 也许有人会更聪明,但我遇到过div之前需要实际拥有内容的情况才能使div成为可获得焦点。这是一支笔,展示了预期的结果:https://codepen.io/anon/pen/QaQBPV。 - 文字“左”。和“对。”使它可以单独聚焦。

<div id=rightColumn class="myColumn frame">
  Right <!-- this bit -->
    <p id=rightPara style="word-wrap: break-word; white-space: pre-wrap;" class=clickable></p>
</div>

包装div时在父div上触发事件的原因是事件冒泡,你设置为true,我在笔中将其更改为false(事件监听器中的最后一个参数) - 请参阅{{ 3}}了解更多信息。