Форум

Crudelis · #1 (**permalink**) 12.11.2010, 22:28

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
<style>
#create{
	position:absolute;
	width:24px;
	height:24px;
	top:0;
	left:0;
	background-color:#00F;
}
#container{
	width:400px;
	height:400px;
	border:1px dashed #63C;
}
</style>
<script>
	function createElem(event)
	{
		if(!event)
			event = window.event;

		var dcont  = document.getElementById('container');
		var div = document.createElement('div');
		div.setAttribute('id','create');
		div.setAttribute('onclick','editItem(this)');
		//div.setAttribute('onmousedown','grabElem()');
		//div.setAttribute('onmouseup','dropElem()');
		div.style.left = event.clientX+'px';
		div.style.top = event.clientY+'px';
		dcont.appendChild(div);
		return false;
	}
	function editItem(ev){
		if(!ev) ev=window.event;
		var contain = document.getElementById('container');
		contain.removeChild(ev);
		return true;
	}
</script>
</head>

<body>
<div id="container" onclick="createElem(event)"></div>
</body>
</html>

Есть див, при нажатии в котором создается ещё один див, я хочу реализовать чтоб при нажатии на дочерний див он исчезал. В моем коде он исчезает, но событие передается в родительский див и создается новый элемент. Помогите, как исправить

vladlen · #2 (**permalink**) 12.11.2010, 23:20

Ну так тебе у родителя надо отменить

div.setAttribute('onclick','editItem(this)');

после создания внутреннего дива
Либо еще правильней

function editItem(ev){
 if(!ev) ev=window.event;
 var contain = document.getElementById('container');
 contain.removeChild(ev);
 return false;
}

В общем тут написано все хорошо

Crudelis · #3 (**permalink**) 12.11.2010, 23:31

vladlen,
дело в том что пользователь должен как удалять так и создавать элементы потом, если я отменю у родителя onclick то как потом пользователь создаст див, пробовал как в статье пишут применить:
ev.stopPropagation ? ev.stopPropagation() : (ev.cancelBubble=true)
тоже самое мозила удаляет и создает новый див, почему то события не прекращаются после удаления дива

monolithed · #4 (**permalink**) 12.11.2010, 23:36

Сообщение от vladlen

Ну так тебе у родителя надо отменить

В качестве родителя выступает главный контейнер, поэтому удаляться будет именно он, а новые элементы добавляются как дочерние для родительского элемента и сестринские для дочерних.

Crudelis · #5 (**permalink**) 12.11.2010, 23:39

monolithed,
дело в том что дочерние дивы создаются, но после нажатия на них они удаляются и событие идет дальше на родительский див и опять создается новый див

monolithed · #6 (**permalink**) 12.11.2010, 23:55

Уже поздно, спать пошел, но оставлю небольшую наводку, которая возможно поможет разъяснить ситуацию:

<style type="text/css">
#container{
    width:400px;
    height:400px;
    border:1px dashed #63C;
}
    
.create {
    background-color:#00F;
    position:absolute;
    width:24px;
    height:24px;
    top:0;
    left:0;
}

</style>
<script type="text/javascript">
window.onload = function(){
    var container = document.getElementById('container');
    var childs = container.getElementsByTagName('div');

    container.onclick = function(event){
        var event = event ||window.event;
        var div = document.createElement('div');
        div.setAttribute('class','create');
        div.style.left = event.clientX+'px';
        div.style.top = event.clientY+'px';
        this.appendChild(div);

        for(i=0; i<childs.length; i++){
            childs[i].onclick = function(i){
                return function(){
                    alert(i + ' : ' +this.offsetTop+'x'+this.offsetLeft);
                };
            }(i);
        }
    };
};
</script>

<div id="container"></div>

PS: обратить внимание на событие после повторного клика на созданный элемент

Crudelis · #7 (**permalink**) 12.11.2010, 23:56

справился, я в создаваемый див добавил div.setAttribute('onclick','editItem(this,event)') ;
в качестве параметров элемент и эвент, всем спасибо)))

vladlen · #8 (**permalink**) 13.11.2010, 02:28

Молодец, я и хотел сказать что тебе и нужен stopPropagation()

Форум

Справочник

Discord чат

Курсы javascript