javascript - 单击子 div 但不单击父 div

Question

我想用 Jquery 创建一个 TreeView 。创建第一个子节点工作得很好。但是当我想创建一个新的 div 并使它成为子 div 的子时，它不起作用，因为仍然选择了父 div 而不是子 div。

$(document).ready(function() {
  for (var i = 0; i < 5; i++) {
    createEle("#nodeContainer", i);
  }
});

var currentSelectedNode = null;

function createEle(parent, title) {
  var container = $("<div></div>");
  container.addClass("node");
  container.attr("id", "treeViewNode" + title);
  container.html(title);
  container.click(function() {
    currentSelectedNode = container;
  });
  $(parent).append(container);
}

function newNode() {
  if (currentSelectedNode === null)
    currentSelectedNode = "#nodeContainer";

  createEle(currentSelectedNode, "child");
}

function deleteNode() {
  if (currentSelectedNode != null)
    $(currentSelectedNode).remove();
}

#nodeContainer {
  margin-top: 10px;
}

.node {
  margin: 10px;
  border-style: solid;
  border-width: 1px;
  border-radius: 2px;
  border-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="newNode()">New Node</button>
<button onclick="deleteNode()">Delete Node</button>
<div id="nodeContainer"></div>

您可以选择一个 div 容器并向其添加新的子容器。但是没有办法为当前的子容器创建子容器。

所以我想创建的是这样的

Answer 1

stopPropagation是防止点击在树上移动所需要的。

$(document).ready(function() {
  for (var i = 0; i < 5; i++) {
    createEle("#nodeContainer", i);
  }
});

var currentSelectedNode = null;

function createEle(parent, title) {
  var container = $("<div></div>");
  container.addClass("node");
  container.attr("id", "treeViewNode" + title);
  container.html(title);
  container.click(function(e) {
    e.stopPropagation()
    $(".selected").removeClass("selected");
    currentSelectedNode = container;
    $(this).addClass("selected");
  });
  $(parent).append(container);
}

function newNode() {
  if (currentSelectedNode === null)
    currentSelectedNode = "#nodeContainer";

  createEle(currentSelectedNode, "child");
}

function deleteNode() {
  if (currentSelectedNode != null)
    $(currentSelectedNode).remove();
}

#nodeContainer {
  margin-top: 10px;
}

.node {
  margin: 10px;
  border-style: solid;
  border-width: 1px;
  border-radius: 2px;
  border-color: black;
  background-color: #FFF;
}

.selected {
  background-color: #CCC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="newNode()">New Node</button>
<button onclick="deleteNode()">Delete Node</button>
<div id="nodeContainer"></div>