在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ html Li標(biāo)簽中的textarea標(biāo)簽無法獲得焦點(diǎn)。

html Li標(biāo)簽中的textarea標(biāo)簽無法獲得焦點(diǎn)。

1.用jquery寫一個問卷，有一道題是如果選了這道題的某個選項(xiàng) 那么這個選項(xiàng)會被打鉤并且會出現(xiàn)一個輸入框供用戶輸入描述，如下圖：
圖片描述

再次點(diǎn)擊這個選項(xiàng)則輸入框消失，選項(xiàng)收起，我用的是Li標(biāo)簽，給Li標(biāo)簽綁定點(diǎn)擊事件，如果被點(diǎn)擊那么插入一個textarea標(biāo)簽，但是這時候被插入的textarea標(biāo)簽無法獲得焦點(diǎn)，我想點(diǎn)擊這個選項(xiàng)后點(diǎn)擊輸入框輸入文字，但是選項(xiàng)被收起了，相當(dāng)于觸發(fā)了Li的點(diǎn)擊事件，我的解決方法如下：

$(".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='輸入具體描述(必填)：'>");
                }
                )};

即如果點(diǎn)擊的是輸入框那么return false，不讓其觸發(fā)li的點(diǎn)擊事件，但是感覺不是正規(guī)解法，請問應(yīng)該怎么解決這種問題，把return false換成stopPropgation阻止冒泡阻止觸發(fā)li的點(diǎn)擊事件為什么沒用？

回答
編輯回答
朕略萌

1.stopPropgation不行是因?yàn)槟憬壎ㄔ趌i上，其不能阻止同一個節(jié)點(diǎn)上的其他事件句柄被調(diào)用。而且整體運(yùn)行沒有被終止，后面的if仍然有效并執(zhí)行。而return則直接結(jié)束了。
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()
  }
});
2018年2月25日 15:05