js单击子元素给父元素添加单击事件onclick会形成连击

网站应用需求多种多样，有的时候单击某个元素（如 <span>删除</span>）需要用js给其父元素添加单击事件；但直接给其父元素添加onclick事件会形成连击，即设置的父元素onclick单击事件会立即执行，不符合由用户单击后再执行的要求。

为了避免形成连击，特意尝试用setTimeout延迟程序的执行，但仍然会形成连击；按理说给其父元素添加的单击事件不会立即执行，估计是子元素与父元素重合所至。

一、js单击子元素给父元素添加单击事件onclick会形成连击事例（即设置的父元素单击事件会立即执行）

例如单击“取消”后需把元素 <b></b> 删除，然后给其父元素 <span></span> 添加单击事件 onclick，具体代码如下：

<div><span><b onclick="concer(this)">取消</b></span><div>

function concer(obj)
  {
    var span = obj.parentNode;
    span.innerHTML = "删除";
    span.setAttribute("onclick","delete()");
  }

以上代码给 <span></span> 设置的 delete() 会被立即执行，形成连击事件。原本是要求用户单击“删除”后才执行 delete()，现却自动执行了，不符合要求。

二、解决方法（js单击子元素给父元素添加单击事件onclick形成连击）

在不删除 <b></b> 的父元素 <span></span> 的情况下，延迟程序的执行还是会形成连击，只有把 <span></span> 删除，然后再新建一个 <span></span>，再给它添加单击事件 onclick 才不会形成连击，则不会立即执行；因为原来的 <span></span> 已经不存在，新<span></span> 与 <b></b> 没有任何一点瓜葛。具体代码如下：

<div><span><b onclick="concer(this)">取消</b></span><div>

function concer(obj)
  {
    var span = obj.parentNode;
    parent = span.parentNode;
    parent.removeChild(span);

  var newSpan = document.createElement("span");
    newSpan.innerHTML = "删除";
    newSpan.setAttribute("onclick","delete()");
  }