label標簽的顯示和隱式關聯問題


按鈕的html

 <!-- 學校 -->
                <div class="layui-inline">
                    <label class="layui-form-label">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="yun.popOpen('/out/school/crmAddSchool', '添加學校信息','690','400')" title="#(i18n.get('新增學校'))">
                            <i class="layui-icon">&#xe654;</i>
                        </button>
                        #(i18n.get('學校'))
                    </label>
                    <div class="layui-input-inline">
                    <select id="school" name="personStudent.schoolId" onchange="yun.casSel(this,'/out/school/casSelName','grade')" lay-verify=""  >
                        <option ></option>
                        #for(school : schools )
                            <option value="#(school.id)">#(school.schoolName)</option>
                        #end
                    </select>
                    </div>
                </div>

問題:項目中出現的問題,學校前邊有一個按鈕是使用label包裹了button,給button添加了點擊事件,每次點擊的時候label總是會觸發button的點擊事件?

答案: 這個主要是label的綁定元素的問題,包裹元素即綁定了某個元素,那么給這個元素設置事件的時候等同於label也會會有事件了,這樣點擊button會觸發事件,點擊label也會觸發事件。

想要的結果:這里的樣式就是需要這樣的,不可以改變。但是點擊button觸發事件,點擊label不觸發事件。

解決辦法:這里主要是用到了layui的樣式,所以只需要把label改成其他的標簽就可以了,他的class保留,這樣樣式就保留下來了。

 <!-- 學校 -->
               
 <div class="layui-form-label">
  <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="yun.popOpen('/out/school/crmAddSchool', '添加學校信息','690','400')" title="#(i18n.get('新增學校'))">
        <i class="layui-icon">&#xe654;</i>
   </button>
    #(i18n.get('學校'))
</div>

這樣就可以實現了。

這里介紹了官方的示例:

w3c示例

顯式綁定
<
form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form>

提示和注釋

注釋:可以通過使用 "for" 屬性將 label 綁定到另一個元素,或者直接在 label 元素內部放置元素。

使用for為lable關聯指定的元素上,這樣點擊label的時候就等於是點擊了綁定的元素。

這種使用for標簽的方式是顯示的方式

隱式的方式是把需要綁定的標簽放到label內部,讓label包裹上這個需要綁定的元素

隱式綁定
<!
DOCTYPE HTML> <html> <body> <form> <label>Male<input type="radio" name="sex" /></label> <br /> <label>Female <input type="radio" name="sex" /></label> </form> </body> </html>

這樣不使用for就可以綁定。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM