javascript - js中的事件处理

Question

我有一个div

<div id="mainDiv" onclick="devide(this.id, event);" style="z-index:1;position:relative; width:400px; height:400px; border:1px red solid;"></div>

在它的点击上，我向它附加了更多的 div，并希望它们发生同样的事情，意味着在那里点击 2 个更多的 div shud b 添加到它们

点击mainDiv主分区 -mainDiv0 -mainDiv1

点击 mainDiv0主分区 -mainDiv0 -mainDiv00 -mainDiv01 -mainDiv1

我猜我能把东西清理干净

我用了下面的js

function devide(id, evt){
    alert(id);
    var divElement = document.getElementById(id);
    if(typeof(divElement) != "undefined" && divElement!=null){
        captureMousePosition(evt);
        if(splitVertical==1)
            verticalSplit(divElement);
        else
            horizontalSplit(divElement);
    }
}

function verticalSplit(divElement){
    divElement.style.border = "0px red dashed";
//  divElement.removeAttribute("onclick");
    var width = ((divElement.offsetWidth-(xMousePos-LEFT_MARGIN))/divElement.offsetWidth)*100;
    var newDiv1 = document.createElement("div");
    newDiv1.setAttribute("id", divElement.id+"0");
//  newDiv1.onclick = "devide('"+divElement.id+"0', event);";
    newDiv1.style.width = (100-width)+"%";
    newDiv1.style.height = "100%";
    newDiv1.style.float = "left";
    newDiv1.style.border = "1px red dashed";
    newDiv1.style.zIndex = divElement.style.zIndex+1;
    var newDiv2 = document.createElement("div");
    newDiv2.setAttribute("id", divElement.id+"1");
    newDiv2.style.width = width+"%";
    newDiv2.style.height = "100%";
    newDiv2.style.float = "left";
    newDiv2.style.border = "1px red dashed";
    newDiv2.style.zIndex = divElement.style.zIndex+1;
    divElement.appendChild(newDiv1);
    divElement.appendChild(newDiv2);
    newDiv1.addEventListener("click",devide(divElement.id+"0", event),true);
    newDiv2.addEventListener("click",devide(divElement.id+"1", event),true);
}

但这是为第一个遇到的元素递归调用 devide 函数，比如 mainDiv0、mainDiv00、mainDiv000....等等

请帮我解决这个问题

Answer 1

您描述的情况称为event bubbling .

W3C 模型表示您可以在事件上调用 .stopPropagation()。 IE 可能需要 window.event.cancelBubble

待办事项unobtrusive javascript用你的代码试试:

HTML

<div id="mainDiv"></div>

JS

function devide(evt){
    var divElement = document.getElementById(this.id);// this.id !
    if(typeof(divElement) != "undefined" && divElement!=null){
        captureMousePosition(evt);
        if(splitVertical==1)
            verticalSplit(divElement);
        else
            horizontalSplit(divElement);
    }
}

document.getElementById('mainDiv').onclick=devide; // notice it's just the function name