能否用jQuery实现点击复制文本？点击复制元素title属性遇事件冒泡问题求助

我懂你这种纠结——原生JS顺顺当当就能实现点击复制元素的title属性，换成jQuery就卡壳了，还怀疑是不是事件冒泡在捣乱。咱们先把问题拆解清楚，再给你靠谱的解决方案~

首先先看你给出的代码片段，第一个可能踩的坑就是文档就绪事件的写法错误：你写的$('document').ready(...)里的document带了引号，这会让jQuery去查找不存在的<document>标签，导致后续的事件绑定根本没触发！正确的写法应该是$(document).ready(...)，或者更简洁的$(function() { ... })。

下面是完整的可运行代码，我帮你补全并优化了细节：

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
  <p class="copy" title="actual text to be copied">Hello world.</p>
  <script>
    // 简洁的文档就绪写法
    $(function() {
      // 给所有带.copy类的元素绑定点击事件
      $('.copy').on('click', function(e) {
        // 按需阻止事件冒泡：如果你的元素有父元素也绑定了点击事件，这一步能避免触发父元素的事件
        e.stopPropagation();
        
        // 获取当前点击元素的title属性值
        const targetText = $(this).attr('title');
        
        // 用现代浏览器支持的Clipboard API实现复制（更简洁可靠）
        navigator.clipboard.writeText(targetText)
          .then(() => {
            console.log('title内容复制成功！');
            // 这里可以加个用户提示，比如alert('复制成功')或者页面内的提示框
          })
          .catch(err => {
            console.error('复制失败：', err);
          });
      });
    });
  </script>
</body>
</html>

几个关键细节说明： #

• 事件冒泡的处理：如果你的页面里存在嵌套元素（比如<div><p class="copy">...</p></div>），点击<p>时事件会向上冒泡到父元素<div>，如果父元素也有点击事件就会被触发。这时候e.stopPropagation()就能阻止事件继续向上传播。如果只是单个独立的<p>元素，这一步其实可以省略，但加上能避免后续页面结构变化带来的问题。
• 复制功能的兼容方案：如果需要兼容非常老旧的浏览器（不支持Clipboard API），可以换成传统的创建临时textarea的方法：

  // 兼容旧浏览器的复制逻辑
  const tempTextarea = $('<textarea/>').val(targetText).appendTo('body');
  tempTextarea.select();
  document.execCommand('copy');
  tempTextarea.remove();
  

• 事件绑定的时机：一定要把事件绑定放在文档就绪回调里，确保DOM元素已经加载完成后再绑定事件，否则jQuery找不到目标元素，绑定会失效。

为什么原生JS能成但jQuery不行？大概率是你之前的代码里文档就绪的写法错误，或者事件绑定时机不对，和事件冒泡的关系可能不大——当然如果有嵌套元素的情况，冒泡确实可能干扰，但先把基础的写法问题解决，再排查冒泡的影响就容易多了。

内容的提问来源于stack exchange，提问作者pbarney