自定义details、summary控件的点击范围
目前，使用和标签创建树形结构时，整个行的点击都会触发折叠或展开操作。为了仅当点击最前面的图标时才触发此操作，可以进行以下调整：
-
在summary中添加额外的标签：在
标签中，添加一个额外的标签来包裹图标。 - 阻止的默认行为：使用css，为设置event-default属性为none，以阻止其默认单击行为（在web中通常触发折叠/展开）。
-
提高图标的层级：将的z-index值设置为大于
的z-index值，这样在点击图标时，就不会受到 的点击事件影响。
最终代码如下：
.tree summary::before {
position: relative;
z-index: 2;
cursor: pointer;
}
.tree summary span::before {
content: '';
position: absolute;
left: 0;
right: 0;
height: 46px;
}tree.addEventListener('click', function(ev) {
if (ev.target.tagName === 'SPAN') {
ev.preventDefault();
}
});通过这些调整，现在只能点击行最前面的图标来触发折叠/展开操作，而不会受点击整行影响。
