js原生实现点击事件只创建一个元素

问题：注册点击事件的时候，多次点击则会重复多次的创建元素

要求：不论点击多少次，只创建一次

思路：触发点击事件，若有，则不创建，若无，则创建

基础HTML代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><style>div{width: 200px;height: 200px;border: 1px solid red;}</style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div></body>
</html>

代码如下:

  document.getElementById("btn").οnclick=function () {//判断,div中有没有这个按钮,有就删除//判断这个按钮的子元素是否存在if(!document.getElementById("btn2")){//如果为false则创建var obj=document.createElement("input");obj.type="button";obj.value="按钮";obj.id="btn2";document.getElementById("dv").appendChild(obj);}};

转载于:https://www.cnblogs.com/shadowsmile/p/10550297.html

js原生实现点击事件只创建一个元素相关推荐

java js id的点击事件_JavaScript中点击事件的写法
click var btn=document.getElementById('btn'); 第一种: btn.οnclick=function(){ alert('hello world'); } 消 ...
Js先执行点击事件，再执行失去焦点事件的解决方法
Js先执行点击事件,再执行失去焦点事件的解决方法思路:给失去焦点事件设置一个暂停,让点击事件先执行. js代码: //点击事件先执行 $(document.body).on('click','#e ...
js练习题:对象字面量的形式创建一个名字为可可的狗对象
js练习题:对象字面量的形式创建一个名字为可可的狗对象名称:可可类型:阿拉斯加犬年龄:5岁颜色:棕红色技能:汪汪汪(Call),演电影(ShowFilm) <!DOCTYPE html ...
vue鼠标点击指定区域创建dom元素与编辑删除元素的思路
vue鼠标点击指定区域创建dom元素与编辑删除元素的思路话不多说有思路直接干一. 鼠标点击页面灰色背景创建红色元素二. 点击已经创建的红色元素则是编辑或者删除根据点击元素的类名来判断是属于创建 ...
python创建一个列表_Python创建一个元素都为0的列表实例
Python创建一个元素都为0的列表实例实现创建一个元素都为0的列表: l=10 lis=[0]*l lis 输出结果: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 以上这篇Pyt ...
3.5链表----链表中元素的删除(只删除一个元素情况)
3.5链表----链表中元素的删除(只删除一个元素情况) 该部分与上一节是息息相关的,关于如何在链表中删除元素,我们一步一步来分析: 一.图示删除逻辑假设我们需要在链表中删除索引为2位置的元素,此时 ...
js 触发LinkButton点击事件，执行后台方法
页面 <asp:LinkButton ID="lbtButton" runat="server" CssClass="lbtButton&qu ...
js追加html 有点击事件,js点击事件的多种写法
javascript 中的点击事件,可以通过多种不同的添加方式来实现.下面介绍三种 javascript 中添加点击事件的示例代码,个人可以根据自己的项目需要选择不同的实现方式. js添加点击事件的代 ...
JS与JQuery点击事件传递参数
我们知道JS(javascript)是一种脚本语言,用于客户端web开发,常用来给html网页添加动态功能,是客户端运行的解释性语言. JQuery是对js的封装,简化了ajax和html的一款js框 ...

js原生实现点击事件只创建一个元素

js原生实现点击事件只创建一个元素相关推荐

最新文章

热门文章