html Li标签中的textarea标签无法获得焦点。

Question

1.用jquery写一个问卷，有一道题是如果选了这道题的某个选项 那么这个选项会被打钩并且会出现一个输入框供用户输入描述，如下图：

再次点击这个选项则输入框消失，选项收起，我用的是Li标签，给Li标签绑定点击事件，如果被点击那么插入一个textarea标签，但是这时候被插入的textarea标签无法获得焦点，我想点击这个选项后点击输入框输入文字，但是选项被收起了，相当于触发了Li的点击事件，我的解决方法如下：

$(".type-2 li").bind("click",function(e){
                if(e.target.nodeName.toLowerCase()=='textarea'){
                    e.target.focus();
                    return false;
                }
                if($(this).hasClass("selected")) {
                    $(this).removeClass("selected").children("i").remove().children("textarea").remove();
                    $(this).children("textarea").remove();
                }else {
                    $(this).addClass("selected").append(
                        $("<i>").addClass("iconfont icon-select-answer animated slow infinite")
                    ).append("<textarea placeholder='输入具体描述(必填)：'>");
                }
                )};

即如果点击的是输入框那么return false，不让其触发li的点击事件，但是感觉不是正规解法，请问应该怎么解决这种问题，把return false换成stopPropgation阻止冒泡阻止触发li的点击事件为什么没用？

Answer 1

1.stopPropgation不行是因为你绑定在li上，其不能阻止同一个节点上的其他事件句柄被调用。而且整体运行没有被终止，后面的if仍然有效并执行。而return则直接结束了。
2.减少DOM操作，提高效率。
3.可以换种思路，代码如下：

$( '.type-2 li' ).on( {
  click( e ) {
    let $this = $( this );
    
    $this.toggleClass( 'selected' ).hasClass( 'selected' )
      ? e.target.nodeName === 'LI'
          &&  $this
                .children( 'i' )
                .remove()
      : $this
          .append(
            `<i class="iconfont icon-select-answer animated slow infinite">
                <textarea placeholder='输入具体描述(必填)：'></textarea>
             </i>`
          ).focus()
  }
});