Próbowałem stworzyć strukturę drzewa za pomocą JavaScript dołączyć dziecko. Utworzyłem przycisk Dodaj. Kliknij przycisk Dodaj przycisk Węzeł korzenia jest utworzony , ale na kliknięciu rodzica, zarówno węzeł macierzysty, jak i węzeł dziecka jest tworzony . Muszę utworzyć tylko węzeł dziecka podczas klikania rodzica. Jak kontynuować?

  function add_div(){
  var div1 = document.createElement('ul');
  document.body.appendChild(div1);
  div1.className = 'ui-modal';
  div1.id = 'test-' + document.querySelectorAll('.ui-modal > .msg1').length;

  div1.innerHTML = '<li class="msg1" onclick="add_div2(this);">root</li>';
}

function add_div2(elem){
     var div2 = document.createElement('ul');
     elem.appendChild(div2);
      div2.className = 'sub-div';
      div2.id = 'sub_test-' + document.querySelectorAll('.sub-div > .msg2').length;
      div2.innerHTML = '<li class="msg2" onclick="add_div3(this);">parent</li>';
}


function add_div3(elem){
     var div3 = document.createElement('ul');
     elem.appendChild(div3);
      div3.className = 'inner-sub-div';
      div3.id = 'inner_sub_test-' + document.querySelectorAll('.inner-sub-div > .msg3').length;
      div3.innerHTML = '<li class="msg3" >child</li>';
}
 .ui-modal{
    	width: 100px;
    	border: 1px solid red;
      margin-left:0;
}
    .sub-div{
        margin-top: 10px;
        width: 150px;
        margin-left: 100px;
        border: 1px solid blue;
}
    .inner-sub-div{
        margin-top: 10px;
        width: 150px;
        margin-left: 250px;
        border: 1px solid blue;
}
<div class="wrapper">
		<input type="button" value="ADD" onclick="add_div();">
</div>

Użyłem Ul i Li w skrypcie, aby stworzyć dołączenie dziecka. Jak utworzyć węzeł dziecka na klikanie węzła nadrzędnego.

0
SRK 5 czerwiec 2018, 12:19

3 odpowiedzi

Najlepsza odpowiedź

Dodaj event.stopPropagation(); w funkcji onclick

  function add_div(){
  var div1 = document.createElement('ul');
  document.body.appendChild(div1);
  div1.className = 'ui-modal';
  div1.id = 'test-' + document.querySelectorAll('.ui-modal > .msg1').length;

  div1.innerHTML = '<li class="msg1" onclick="event.stopPropagation();add_div2(this);">root</li>';
}

function add_div2(elem){
     var div2 = document.createElement('ul');
     elem.appendChild(div2);
      div2.className = 'sub-div';
      div2.id = 'sub_test-' + document.querySelectorAll('.sub-div > .msg2').length;
      div2.innerHTML = '<li class="msg2" onclick="event.stopPropagation();add_div3(this);">parent</li>';
}


function add_div3(elem){
     var div3 = document.createElement('ul');
     elem.appendChild(div3);
      div3.className = 'inner-sub-div';
      div3.id = 'inner_sub_test-' + document.querySelectorAll('.inner-sub-div > .msg3').length;
      div3.innerHTML = '<li class="msg3" >child</li>';
}
 .ui-modal{
    	width: 100px;
    	border: 1px solid red;
      margin-left:0;
}
    .sub-div{
        margin-top: 10px;
        width: 150px;
        margin-left: 100px;
        border: 1px solid blue;
}
    .inner-sub-div{
        margin-top: 10px;
        width: 150px;
        margin-left: 250px;
        border: 1px solid blue;
}
<div class="wrapper">
		<input type="button" value="ADD" onclick="add_div();">
</div>
0
Nandita Sharma 5 czerwiec 2018, 09:29

Problem jest z powodu bulgoczenia wydarzenia. Twoje klikanie child jest propagowane do parent UL, jak również utworzone jest kliknięcie dwukrotnego efektu.

Zatrzymaj tę propagację za pomocą "{x0}}", dla tego potrzebujesz obiektu zdarzenia, możesz przekazać to w swoich funkcjach.

Przeczytaj więcej o wydarzeniach tutaj: https://developer.mozilla.org/en-us/ Dokumenty / Dowiedz się / JavaScript / Building_Blocks / Wydarzenia A na temat bulgoczącego wydarzenia przewiń w dół do sekcji "Sekcja bulgotania i przechwytywania" na tej stronie.

function add_div(){
  var div1 = document.createElement('ul');
  document.body.appendChild(div1);
  div1.className = 'ui-modal';
  div1.id = 'test-' + document.querySelectorAll('.ui-modal > .msg1').length;

  div1.innerHTML = '<li class="msg1" onclick="add_div2(event, this);">root</li>';
}

function add_div2(event, elem){
    event.stopPropagation();
     var div2 = document.createElement('ul');
     elem.appendChild(div2);
      div2.className = 'sub-div';
      div2.id = 'sub_test-' + document.querySelectorAll('.sub-div > .msg2').length;
      div2.innerHTML = '<li class="msg2" onclick="add_div3(event, this);">parent</li>';
}


function add_div3(event,elem){
event.stopPropagation();
     var div3 = document.createElement('ul');
     elem.appendChild(div3);
      div3.className = 'inner-sub-div';
      div3.id = 'inner_sub_test-' + document.querySelectorAll('.inner-sub-div > .msg3').length;
      div3.innerHTML = '<li class="msg3" >child</li>';
}
.ui-modal{
    	width: 100px;
    	border: 1px solid red;
      margin-left:0;
}
    .sub-div{
        margin-top: 10px;
        width: 150px;
        margin-left: 100px;
        border: 1px solid blue;
}
    .inner-sub-div{
        margin-top: 10px;
        width: 150px;
        margin-left: 250px;
        border: 1px solid blue;
}
<div class="wrapper">
		<input type="button" value="ADD" onclick="add_div();">
</div>
0
Himanshu Tyagi 5 czerwiec 2018, 09:33

Użyj event.stopPropagation(); na kliknięciu rodzica div

function add_div(){
  var div1 = document.createElement('ul');
  document.body.appendChild(div1);
  div1.className = 'ui-modal';
  div1.id = 'test-' + document.querySelectorAll('.ui-modal > .msg1').length;

  div1.innerHTML = '<li class="msg1" onclick="add_div2(event,this);">root</li>';
}

function add_div2(event,elem){
  
     var div2 = document.createElement('ul');
     elem.appendChild(div2);
      div2.className = 'sub-div';
      div2.id = 'sub_test-' + document.querySelectorAll('.sub-div > .msg2').length;
      div2.innerHTML = '<li class="msg2" onclick="add_div3(event,this);">parent</li>';
}


function add_div3(event,elem){
     var div3 = document.createElement('ul');
     event.stopPropagation();
     elem.appendChild(div3);
      div3.className = 'inner-sub-div';
      div3.id = 'inner_sub_test-' + document.querySelectorAll('.inner-sub-div > .msg3').length;
      console.log()
      div3.innerHTML = '<li class="msg3" >child</li>';
}
 .ui-modal{
    	width: 100px;
    	border: 1px solid red;
      margin-left:0;
}
    .sub-div{
        margin-top: 10px;
        width: 150px;
        margin-left: 100px;
        border: 1px solid blue;
}
    .inner-sub-div{
        margin-top: 10px;
        width: 150px;
        margin-left: 250px;
        border: 1px solid blue;
}
<div class="wrapper">
		<input type="button" value="ADD" onclick="add_div();">
</div>
0
Gowtham 5 czerwiec 2018, 09:32