html点击父元素执行子元素,js单击子元素给父元素添加单击事件onclick会形成连击...

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

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

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

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

取消

function concer(obj)

{

var span = obj.parentNode;

span.innerHTML = "删除";

span.setAttribute("onclick","delete()");

}

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

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

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

取消

function concer(obj)

{

var span = obj.parentNode;

parent = span.parentNode;

parent.removeChild(span);

var newSpan = document.createElement("span");

newSpan.innerHTML = "删除";

newSpan.setAttribute("onclick","delete()");

}