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，

然后单击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

您描述的情况称为事件冒泡。

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

来执行不引人注目的 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

Answer 2

关于以下几行：

var divElement = document.getElementById(id);
if(typeof(divElement) != "undefined" && divElement!=null){

typeof 是一个运算符，而不是一个函数，因此它后面不需要跟分组运算符 ()。

更重要的是，测试的第一部分是不必要的，第二部分可以简化为：

if (divElement) {

如果 document 对象不存在，或者不支持 getElementById 则第一行将导致脚本错误并停止执行。如果第一行成功执行，则 divElement 将是对 DOM 元素的引用或 null（根据 W3C DOM 核心规范）。

鉴于上述情况，如果 divElement != null 返回 true，则 typeof divElement != 'undefined' 必须返回 true（因为 divElement 不能是未定义的，即使它是，未定义== null），反之亦然，所以它是多余的。如果需要显式测试（很少需要），则应

if (divElement !== null) {

使用：。