Обработка событий в JS - PullRequest
Новая
       3

Обработка событий в JS

1 голос
/ 15 апреля 2011

у меня есть 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 divs, добавленные к ним shud

при нажатии на mainDiv mainDiv -mainDiv0 -mainDiv1

при нажатии на mainDiv0 mainDiv -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);
}

, но это рекурсивный вызов функции деления для первого встреченного элемента, скажем, mainDiv0, mainDiv00, mainDiv000 .... и так далее

, пожалуйста, помогите мнес этим

Ответы [ 2 ]

2 голосов
/ 15 апреля 2011

Ситуация, которую вы описываете, называется всплеск событий .

Модель 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
1 голос
/ 15 апреля 2011

Относительно строк: 

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

typeof является оператором, а не функцией, поэтому за ним не должен следовать оператор группировки ().

Что еще более важно, первая часть теста не нужна, а вторую можно уменьшить до: 

if (divElement) {

Если объект document не существует,или не поддерживает getElementById , тогда первая строка приведет к ошибке сценария и остановит выполнение.Если первая строка выполняется успешно, то divElement будет либо ссылкой на элемент DOM, либо null (согласно спецификации W3C DOM Core).

Учитывая вышеизложенное, если divElement! = null возвращает значение true, тогда typeof divElement! = 'undefined' должно возвращать значение true (поскольку divElement не может быть неопределенным и даже если онобыл, undefined == null ), и наоборот, так что это избыточно.Если требуется явный тест (и редко), то следует использовать: 

if (divElement !== null) {

.

...