js请问如何阻止事件的连续发生呢?

设个变量，click的时候判断这个变量，如果为true，执行dom添加，把变量设为false，dom操作后，变量设为true。

同意+1
或者做事件绑定
一开始事件绑定在DIV上，当添加完成时就给他取绑，操作完新添的DOM元素后再次给绑定，
不过还是推介用一楼的方法

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style>
.con li{padding:6px; background:#eee; border:1px solid #ccc; list-style:none outside none;  margin:10px; width:60%}
a{text-decoration:none}
.moreopr{display:none; width:30px}
.opr{font-size:12px; margin:4px 6px}
.opr a{margin:2px 4px}
.zbDiv{border:1px solid #EAEAEA; background:#FFF; padding:3px; margin:6px}
#wbnum{font-size:24px; color:blue}
#topOpr span{ cursor:pointer}
   </style>
<script>
function $(id){
return document.getElementById(id);
}
function addEvent(elm, evType, fn, useCapture){
if (elm.addEventListener){// Mozilla, Netscape, Firefox
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent) {//IE
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
}
}

function removeEvent(element, type, handler){
        if (element.removeEventListener){
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    }

function stopBubble(e) {
    // If an event object is provided, then this is a non-IE browser
    if ( e  && e.stopPropagation)
// and therefore it supports the W3C stopPropagation() method
e.stopPropagation();
    else
// Otherwise, we need to use the Internet Explorer way of cancelling event bubbling
window.event.cancelBubble = true;
}
function preventDefault(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    }

function getEvent(event){
        return event ? event : window.event;
    }


    function getTarget(event){
        return event.target || event.srcElement;
    }


function createZb(){
var div = document.createElement("div");
div.className = "zbDiv";
var input = document.createElement("input");
var button = document.createElement("button");
input.type = "text";
input.value = "请在此输入评论";
button.value = button.innerHTML=  "提交";
div.innerHTML = "请转播并添加评论";
div.appendChild(input);
div.appendChild(button);
return div;
}
//改变e元素的tag为newtag
function changeTag(e,newtag){
tag = document.createElement(newtag);
e.parentNode.replaceChild(tag,e);
} window.onload = function(){

var li = $("con").getElementsByTagName("li");
// var moreopr =  document.querySelectorAll(".moreopr");
var topOpr = $("topOpr");
addEvent(topOpr,"click",function(event){
var  event = getEvent(event);
var target = getTarget(event);
switch(target.id){
case "topDel":
break;
case "topAdd":
var copyitem = li[0].cloneNode(true);
$("con").appendChild(copyitem);
$("wbnum").innerHTML = li.length;
clickli();
break;

}
})
clickli();
function clickli(){
for(var i=0;i<li.length;i++){
var opr = [];
opr[i] = li[i].lastElementChild;
addEvent(opr[i],"click",function(event){   //事件委托
var  event = getEvent(event);
var target = getTarget(event);
switch(target.className){
case "zb": //当为转播
var newdiv = createZb();
var isAdd = false;
if(this.className == "opr")
{
if(isAdd)
{return false}
else{
this.appendChild(newdiv); //此处this指.opr[i]中的一个
isAdd = true;
}

this.lastChild.getElementsByTagName("button")[0].onclick = function(){
that = this.parentNode.parentNode; //此处this变为button[0];
that.removeChild(that.lastChild);
}

}
else{
;//ie操作
}
preventDefault(event);
break;
case "xg": //当为转播
var beforeTxt = this.previousElementSibling.innerHTML;
changeTag(this.previousElementSibling,"input");
this.previousElementSibling.type = "text";
this.previousElementSibling.value = beforeTxt;
var tj = document.createElement("button");
tj.innerHTML="提交";
this.parentNode.insertBefore(tj,this);
break;

case "del": //当删除
this.parentNode.parentNode.removeChild(this.parentNode);
var opr = document.querySelectorAll(".opr");
$("wbnum").innerHTML = opr.length;
break;
case "gd": //当更多

if(!this.lastElementChild.firstElementChild.getAttribute("display"))
{this.lastElementChild.firstElementChild.style.display = "none"}
if(this.lastElementChild.firstElementChild.style.display == "none")
{this.lastElementChild.firstElementChild.style.display = "block"}
break;
}
},true)
}
}
}

</script>
</head>
<body>
<div>您共有<span id="wbnum">5</span>条微博：</div>
<ul class = "con" id = "con">
<li>
<div>微博内容1</div>
<div class="opr">
<a href="#" class="zb" >转播</a>|
<a href="#" class="xg" >修改</a>|
<a href="#" class="del">删除</a>|
<a href="#" class="gd">更多<span class="moreopr">对话|收藏|分享|详情|举报</span></a>
</div>
</li>
<li>
<div>微博内容2</div>
<div class="opr">
<a href="#" class="zb">转播</a>|
<a href="#" class="xg" >修改</a>|
<a href="#" class="del">删除</a>|
<a href="#" class="gd">更多<span class="moreopr">对话|收藏|分享|详情|举报</span></a> </div>
</li>
<li>
<div>微博内容3</div>
<div class="opr">
<a href="#" class="zb">转播</a>|
<a href="#" class="xg" >修改</a>|
<a href="#" class="del">删除</a>|
<a href="#" class="gd">更多<span class="moreopr">对话|收藏|分享|详情|举报</span></a> </div>
</li> <li>
<div>微博内容4</div>
<div class="opr">
<a href="#" class="zb">转播</a>|
<a href="#" class="xg" >修改</a>|
<a href="#" class="del">删除</a>|
<a href="#" class="gd">更多<span class="moreopr">对话|收藏|分享|详情|举报</span></a> </div>
</li> <li>
<div>微博内容5</div>
<div class="opr">
<a href="#" class="zb">转播</a>|
<a href="#" class="xg" >修改</a>|
<a href="#" class="del">删除</a>|
<a href="#" class="gd">更多<span class="moreopr">对话|收藏|分享|详情|举报</span></a>
</div>
</li>
</ul>
<div id="topOpr"><span  id ="topDel">删除</span>|<span href="#" id="topAdd">新增</span>|<span href="#">更多</span></div>
</body>
</html>
上面二位的建议很好，可是不太会应用。
谁帮我看看这些问题啊1:chrome和IE中this指针不指向同一个;
2:事件新增li后，新增的li内的动作不执行
3:事件连续发生，上面二位的建议很好，可是不太会应用。

凡是不定对象触发的，我都习惯加一个状态参数，不管什么语言
通过确认这个状态判断触发是否执行（兼容或冲突）
例如一个触发B必须在另一个触发A完成后才能执行，那么我会对A的模块在过程中设定状态为未开始、执行中、完成，B模块在触发时判断状态完成才执行，未开始和执行中均return false

这个明显是业务逻辑~~~
某对象可以进行  A操作
      A操作后   不能再A操作
      进行非A操作后才可进行 A操作在这个流程层面ok了  那么代码也就ok了

设个变量，click的时候判断这个变量，如果为true，执行dom添加，把变量设为false，dom操作后，变量设为true。

调试易

js请问如何阻止事件的连续发生呢?

解决方案 »