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

前言

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

代码

点击事件

<span class="weixin">教书先生</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">教书先生</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

相关说明:

1、VIP会员无限制任意下载,免积分。立即前往开通>>

2、下载积分可通过日常 签到绑定邮箱 以及 积分兑换 等途径获得!

3、本站资源大多存储在云盘,如出现链接失效请评论反馈,如有密码,均为:www.ipipn.com。

4、所有站内资源仅供学习交流使用。未经原版权作者许可,禁止用于任何商业环境,否则后果自负。为尊重作者版权,请购买正版作品。

5、站内资源来源于网络公开发表文件或网友分享,如侵犯您的权益,请联系管理员处理。

6、本站提供的源码、模板、软件工具等其他资源,都不包含技术服务,请大家谅解!

7、源码、模板等资源会随着技术、坏境的升级而存在部分问题,还请慎重选择。

PS.源码均收集自网络,如有侵犯阁下权益,请发信件至: admin@ipipn.com .


源站网 » JavaScript给指定标签添加复制点击事件

发表评论

赞助本站发展 维持服务器消耗

全站源码免费下载 立刻赞助