JavaScript中的Button错位响应

2015-05-13 05:31:54 152 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

用 Storybook 搭建原生 JS 组件沙箱：零框架、高隔离、可验证 Web Components 是现代前端实现跨框架复用与样式隔离的核心技术，其本质是将组件抽象为可注册、可实例化、可参数化控制的自定义 HTML 元素。Storybook 作为独立于框架的 UI 开发环境，通过 v8 版本对 Web Components 的原生支持，实现了组件定义、状态驱动、视觉预览与自动化测试的一体化闭环。它让 JS 组件不再依赖 React 或 Vue 运行时，真正具备嵌入静态页、WebView 甚至桌面应用的能力。本文聚焦于如何基于纯 JavaScript 和 Web Compone 阅读详情

如图，问题是当我单击上面的复制按钮时，下面的复制按钮却响应变化。

两个按钮的代码如下所示



       		<div class="baseurl-div form-group">

                <label for="component-title" class="col-lg-3">服务商管理地址</label>

                <div class="col-lg-5">

	                 <input id="baseurl" type="text" readonly="true"  class="form-copy-line param">

	                 <button id="copy—baseurl" type="button" data="baseurl" class="copyBtn btn-primary btn-xs" onclick="copyContent('baseurl')">复制 </button>

	                 <p  class="pmt-form-help-block">服务商管理地址</p>

                </div>

                  <div class="clear"></div>

            </div>

                        

              <div class="channelurl-div form-group">

               <label for="component-title" class="col-lg-3">渠道商管理地址</label>

               <div class="col-lg-5">

                <input id="channelurl" type="text" readonly="true" class="form-copy-line param">

              	<button id="copy—channelurl" type="button" data="channelurl" class="copyBtn btn-primary btn-xs" onclick="copyContent('channelurl')">复制 </button>

                <p  class="pmt-form-help-block">渠道商管理地址</p>

               </div>

                 <div class="clear"></div>

onClick响应函数

function copyContent(id){

	alert(id);

	if(window.clipboardData){

		var content = document.getElementById(id).value;

		window.clipboardData.setData("Text" ,content);

		alert("URL已复制到黏贴板！");

	}else{

		alert("文本已选中\n请按Ctrl+C复制文本");

		document.getElementById(id).select();

	}

}

在提供一条信息我右击上面一个按钮时弹出的是