JavaScript给指定标签添加复制点击事件

2935868921

发表文章数:105

首页 » 经验教程 » 正文

JavaScript给指定标签添加复制点击事件


前言

分享一下如何给网站指定标签添加指定事件的,不能带on

代码

点击事件

<span class="weixin">xiaohuli-ly</span>
<script>
    // 选取DOM节点的方法,可以使用其它类似的api,比如document.getElementById
    var $ = document.querySelector.bind(document);
    var $$ = document.querySelectorAll.bind(document);
    function copyWeixin(evt) {
        // 新建一个“区域”,并把微信号的节点加到里面
        const range = document.createRange();
        range.selectNode(evt.currentTarget);
        // 获取文档已选区域,
        const selection = document.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
        // 复制
        document.execCommand('copy');
        // 清除选中状态
        selection.removeAllRanges();
        // 提示用户复制成功
        alert('微信复制成功');
    }
    // 给所有微信号节点增加点击事件的处理方法(点击时复制)
    [].slice.call($$('.weixin')).forEach(function (dom) {
        dom.addEventListener('click', copyWeixin);
    });
</script>

复制事件

<span class="weixin">xiaohuli-ly</span>
<script>
    // 选取DOM节点的方法,可以使用其它类似的api,比如document.getElementById
    var $ = document.querySelector.bind(document);
    var $$ = document.querySelectorAll.bind(document);
    // 微信复制成功后的回调方法
    function weixinCopied(evt) {
        // 复制成功\
        alert("复制成功!");
    }
    // 给所有微信号节点增加复制事件的处理方法
    [].slice.call($$('.weixin')).forEach(function (dom) {
        dom.addEventListener('copy', weixinCopied);
    });
</script>

事件列表

菜鸟教程:https://www.runoob.com/jsref/dom-obj-event.html

 

 

 

 

未经允许不得转载:作者:2935868921, 转载或复制请以 超链接形式 并注明出处 小狐狸资源网
原文地址:《JavaScript给指定标签添加复制点击事件》 发布于2020-08-02

赞(1) 打赏
招聘广告位

评论 抢沙发

8 + 6 =


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

切换登录

注册