至少在最新版本的 Chrome for Windows 下，paste 事件监听器给我的结果不一致。
我正在尝试从屏幕上的两个分栏中监听 paste 事件，并允许用户根据他/她最后点击的位置将文本粘贴到一列或另一列。出于某种原因，粘贴的文本总是放在右侧的列中。
有人指出我可以使用 <input>而不是 <p>为此，但是一旦用户粘贴文本，我希望我的脚本响应粘贴文本和 AFAIK 的点击字词 <input>不允许这样做。
感谢任何经验、帮助或解决方法，谢谢。
在 Windows 7 Pro 下使用 Chrome 版本 63.0.3239.132 进行测试，在 Ubuntu 下使用 Chromium 最新版本。
更新，1/12/18:
正在关注 advice from @Grant (下)，我将内容插入到我的两个 <div> s 和 Chrome 开始接受它们的粘贴操作。此外，一直不响应窗口任何位置的粘贴操作的 Firefox 现在也开始接受
将文本粘贴到两列。
与此同时，我在此处发布的示例仍然适用，我想知道原因:这是“预期”行为，还是这些浏览器的粘贴事件只是实现问题？
// 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%;
}<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Text pasted to left column goes to right column</title>
</head>
<body>
<h3>With Google Chrome, Version 63.0.3239.132 (Official Build) (64-bit) under
Windows Pro 7 64 bit,
clicking and pasting in either column pastes to the right column.
</h3>
<div id=leftColumn class="myColumn frame">
<p id=leftPara style="word-wrap: break-word; white-space: pre-wrap;" class=clickable></p>
</div>
<div id=rightColumn class="myColumn frame">
<p id=rightPara style="word-wrap: break-word; white-space: pre-wrap;" class=clickable></p>
</div>
</body>最佳答案
我无法明确地告诉您为什么这种行为是这样的 - 也许更聪明的人可以，但我之前遇到过 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(事件监听器中的最后一个参数)- 参见 http://alistapart.com/article/domtricks2更多信息。
关于javascript - 为什么将单独的 "paste"事件监听器都粘贴到同一个 <div>？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48174838/