点击复制浏览器URL按钮后Alert不生效及移动端适配问题排查

第一段代码：Alert无法触发的原因 #

你这段代码里，return navigator.clipboard.writeText(url);会直接终止函数执行——return语句一旦运行，函数就会立刻结束，后面的alert代码根本没机会被执行。另外，navigator.clipboard.writeText是异步操作，就算没有return，也可能出现复制还没完成、alert先弹出的逻辑问题。

第二段代码：移动端仅执行alert的原因 #

1. onclick语法错误：myFunction();,alertUrl();里的逗号是无效写法，浏览器解析时会忽略前面的myFunction()，导致移动端只执行了后面的alertUrl()。
2. 变量名大小写错误：alertUrl函数里用了大写的URL，但你定义的变量是小写的url，这会导致提示内容显示undefined。
3. 异步操作未处理：复制操作是异步的，直接分开调用两个函数，就算语法正确，也可能出现提示先弹出但复制还没完成的情况；移动端对剪贴板操作的交互上下文要求更严格，这种写法很容易导致复制失败。

正确的实现代码 #

<a id="copy" href="javascript:void(0);"><i class="fa fa-files-o" aria-hidden="true"></i></a>

<script>
const currentUrl = window.location.href;
const copyButton = document.getElementById('copy');

copyButton.addEventListener('click', async function() {
  try {
    // 等待复制操作完成
    await navigator.clipboard.writeText(currentUrl);
    // 复制成功后再弹出提示
    alert(`Copied the URL: ${currentUrl}`);
  } catch (error) {
    // 捕获复制失败的场景，比如用户拒绝剪贴板权限
    alert('Failed to copy URL: ' + error.message);
  }
});
</script>

优化说明 #

• 用addEventListener绑定点击事件，代替内联onclick，避免语法错误，代码也更易维护。
• 通过async/await处理剪贴板的异步操作，确保复制完成后再执行提示，逻辑更严谨。
• 增加try/catch捕获复制失败的情况，提升用户体验。

内容的提问来源于stack exchange，提问作者Mohammad Fathi Rahman