HTML5自定义元素点击范围扩大技巧

解决方法是通过css和javascript来实现。首先，在css中，我们为summary元素的伪元素::before设置更高的z-index值，并添加cursor: pointer使其显示为可点击的指针。同时，在summary内添加一个span元素，并使用其伪元素::before覆盖整个行高，从而创建一个点击遮罩层。代码如下：

.tree summary::before{
  position: relative;
  z-index: 2;
  cursor: pointer
}
.tree summary span::before{
  content:'';
  position: absolute;
  left: 0;
  right: 0;
  height: 46px;
}

然后，使用javascript监听

tree.addEventListener('click', function(ev){
  if (ev.target.tagName === 'SPAN') { 
    ev.preventDefault()
  }
})