ZeroClipboard 复制到剪切板的一些事件

最新推荐文章于 2025-06-06 09:13:03 发布

中国风2012

最新推荐文章于 2025-06-06 09:13:03 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript JQuery

本文链接：https://blog.youkuaiyun.com/hanshileiai/article/details/42192271

JavaScript 同时被 2 个专栏收录

22 篇文章

订阅专栏

JQuery

8 篇文章

订阅专栏

本文介绍了如何使用ZeroClipboard.js库实现网页元素的复制功能。通过配置ZeroClipboard实例，实现了元素复制、激活和取消激活等操作。此外，文章还展示了如何在用户交互时触发复制行为，并提供了代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ZeroClipboard.config({
    moviePath: "http://zeroclipboard.org/javascripts/zc/ZeroClipboard_1.3.1.swf",
    cacheBust: false,
    forceHandCursor: true,
    autoActivate: false,
    debug: true
});

var client = new ZeroClipboard();

client.on("load", function (client) {
    console.log("load");

    client.on("complete", function (client, args) {
        console.log("complete");
    });

    client.on("dataRequested", function (client, args) {
        console.log("dataRequested");
        client.setText("TestX");
    });

    client.on("mouseover", function (client) {
        console.log("mouse over");
    });

    client.on("mouseout", function (client) {
        ZeroClipboard.deactivate();
        console.log("mouse out");
    });

    client.on("mousedown", function (client) {
        console.log("mouse down");
    });

    client.on("mouseup", function (client) {
        console.log("mouse up");
    });
});

$(document).on("mouseover", ".testButton", function (e) {
    var text = $(this).attr("data-text");

    client.setText(text);
    ZeroClipboard.activate(this);
});

$("#testButton").click(function (e) {
    $("body").append($("#template").clone());
});