Clipboard.js: why can't use trigger('click') ? (为什么无法手动触发拷贝事件？)

[gaoqiang19514]

`
button class="btn" data-clipboard-text="123456"
click to copy
button

new Clipboard('.btn');
$('.btn').trigger('click');
// nothing to happen
`

[Froguard]

@gaoqiang19514 应该是浏览器的安全限制，要有一个event才执行剪切板的相关操作，这里的event需要注意，用js代码创建的event 和 用户交互式（即用户正常鼠标点击）产生的event有一定的区别的。比如，
This is the browser's security limit，we need a truth event to operate clipborad，it is a different obj from event which created by your program（like js code），such as：

domXxx.click(); // domXxx.onClick();
$('.xx').click();   // $('.xx').trigger('click');

等，都是不会让copy效果生效的，clipboard.js 会抛error
It unwork and you will catch a error.
这里有说明的
See the detail in this link.
wiki/Known-Limitations

[Froguard]

@gaoqiang19514 issues里有一种曲线救国的方式，你看一下
another way to solve the problem like this:
issues/389

function clipboard(text, event) {
        const cb = new Clipboard('.null', {
            text: () => text
        });
        cb.on('success', function(e) {
            console.log(e);
            cb.off('error');
            cb.off('success');
        });
        cb.on('error', function(e) {
            console.log(e);
            cb.off('error');
            cb.off('success');
        });
        cb.onClick(event);
}

用法
useage

let domNode = document.getElementById('yourBtn');
domNode.addEventListener('click', event => clipboard('some text you need copy', event));

[gaoqiang19514]

谢谢老哥！

[designbyadrian]

Can somebody please translate the rest of the comments to English so the rest of us who might have the same issue might learn something?

[Froguard]

@designbyadrian done! 😃

[ieliwb]

@Froguard 大哥，这个怎么使用啊
function clipboard(text, event) {
const cb = new Clipboard('.null', {
text: () => text
});
cb.on('success', function(e) {
console.log(e);
cb.off('error');
cb.off('success');
});
cb.on('error', function(e) {
console.log(e);
cb.off('error');
cb.off('success');
});
cb.onClick(event);
}
我直接clipboard("xxoo",null);报错

[RosApr]

@Froguard
how to use your code ,can you code a demo
thx

[pecopeco]

@RosApr @ieliwb

$('#copyBtn').on('click', (e) => {
     clipboard('text', e);
 });

[wlxscn]

@Froguard 大哥，这个怎么使用啊
function clipboard(text, event) {
const cb = new Clipboard('.null', {
text: () => text
});
cb.on('success', function(e) {
console.log(e);
cb.off('error');
cb.off('success');
});
cb.on('error', function(e) {
console.log(e);
cb.off('error');
cb.off('success');
});
cb.onClick(event);
}
我直接clipboard("xxoo",null);报错

你解决了吗，我直接用这个也报错

[gaoqiang19514]

是可以用的，我当时弄通了的，自己多摸索下，几年前的了，我都忘记了

在 2019-08-08 18:35:46，"山丘" [e-mail] 写道：

@Froguard 大哥，这个怎么使用啊
function clipboard(text, event) {
const cb = new Clipboard('.null', {
text: () => text
});
cb.on('success', function(e) {
console.log(e);
cb.off('error');
cb.off('success');
});
cb.on('error', function(e) {
console.log(e);
cb.off('error');
cb.off('success');
});
cb.onClick(event);
}
我直接clipboard("xxoo",null);报错

你解决了吗，我直接用这个也报错

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[wlxscn]

是可以用的，我当时弄通了的，自己多摸索下，几年前的了，我都忘记了 在 2019-08-08 18:35:46，"山丘" [e-mail] 写道： @Froguard 大哥，这个怎么使用啊 function clipboard(text, event) { const cb = new Clipboard('.null', { text: () => text }); cb.on('success', function(e) { console.log(e); cb.off('error'); cb.off('success'); }); cb.on('error', function(e) { console.log(e); cb.off('error'); cb.off('success'); }); cb.onClick(event); } 我直接clipboard("xxoo",null);报错 你解决了吗，我直接用这个也报错 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.
想想呗，我这边报错，不知道跟版本有没有关系

[gaoqiang19514]

@wlxscn 你的报错信息发来看看

[wlxscn]

@wlxscn 你的报错信息发来看看

已经解决了，谢谢

[gaoqiang19514]

@wlxscn 啥忙都没帮上，拒绝你的谢谢！