MDN will switch to a new design later today, a sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

copy

用户在浏览器界面进行copy行为的时候,会触发copy 事件。copy行为如:使用CTRL/Cmd+C快捷键或者在操作里点击"Copy"命令。copy事件会调用document.execCommand('copy')

基本信息

Specification
Clipboard
Interface
ClipboardEvent
Bubbles
Yes
Cancelable
Yes
Target
Element: 获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<body>
Default Action
See below.

调用setData(format, data)可以修改ClipboardEvent.clipboardData事件的默认行为:

document.addEventListener('copy', function(e){
    e.clipboardData.setData('text/plain', 'Hello, world!');
    e.clipboardData.setData('text/html', '<b>Hello, world!</b>');
    e.preventDefault(); // We want our data, not data from any selection, to be written to the clipboard
});

不能使用clipboardData.getData()在事件处理函数中获取剪切板数据。

事件的行为与事件的来源和事件处理函数相关事件行为可能会因为事件触发的对象和事件处理函数而有不同的表现

  • synthetic copy事件没有默认行为,除非:
  • 如果默认事件没有取消,就复制到选区(如果有选中内容)到剪切板;
  • 如果取消了默认事件,但是调研了setData()方法:就复制clipboardData的内容到clipboard;
  • 如果取下了默认行为,而且没有调用setData()方法,就没有任何行为

属性

Property Type Description
target 只读 EventTarget The event target (the topmost target in the DOM tree).
type 只读 DOMString The type of event.
bubbles 只读 Boolean Whether the event normally bubbles or not
cancelable 只读 Boolean Whether the event is cancellable or not?

兼容性

     
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) (Yes) (Yes) ? ? ?
clipboardData (Yes) (Yes) 22 (22) 未实现 ? ?
     
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes) (Yes) ? ? ?
clipboardData ? (Yes) 22.0 (22) ? ? ?

相关事件

文档标签和贡献者

标签: 
 此页面的贡献者: maicss
 最后编辑者: maicss,