前言
分享一下如何给网站指定标签添加指定事件的,不能带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>