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

最新推荐文章于 2021-08-23 13:47:20 发布

weixin_30408309

最新推荐文章于 2021-08-23 13:47:20 发布

阅读量168

点赞数

原文链接：http://www.cnblogs.com/shadowsmile/p/10550297.html

版权

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

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

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

基础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

优惠劵

weixin_30408309

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js原生实现点击事件只创建一个元素

问题：注册点击事件的时候，多次点击则会重复多次的创建元素要求：不论点击多少次，只创建一次思路：触发点击事件，若有，则不创建，若无，则创建基础HTML代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>...
复制链接

扫一扫