양식 입력 항목은 레이블을 사용하고 Bootstrap 라이브러리를 참조하므로 입력 클릭 효과 영역이 늘어납니다.

产品姐姐想法多，点击input项才能聚焦进行操作，点击外部不能有反应

라벨을 더욱 의미있게 만들기 위해 양식 항목에서는 레이블을 사용하여

<label for="label-input"><input type="text" class="" id="label-input"><br><button>buttonbutton>label>

모바일 플랫폼 페이지 개발에 있어서 양식 항목의 클릭 가능한 영역을 더 크게 만들고 더 잘 작동하기 위해 라벨은 이에 상응하는 편의성을 제공할 수 있습니다.

하지만 때로는 라벨만 필요한데 아무 이유 없이 클릭 가능한 영역이 늘어나는 것을 원하지 않을 때가 있습니다. Bootstrap 도입으로 자동으로 클릭 가능 영역이 늘어납니다

위 그림과 같이 입력 항목을 클릭하면 효과가 있지만 레이블을 클릭하면 태그 내의 다른 빈 영역이 트리거됩니다(버튼을 클릭하면 트리거되지 않습니다)

Bootstrap 스타일 라이브러리를 소개

<link rel="stylesheet" type="text/css" href="bootstrap.min.css?1.2.45">

해결하려면 문제가 있는 경우 이벤트트리거된객체를 확인해보세요. 하지만 유효하지 않으며 항상 INPUT 태그이므로 비과학적입니다

$('#label-input').click(function(e) {var elem = e.target;
    console.log(elem.tagName);if (elem.tagName !== 'INPUT') {return false;
    }
})

어떻게 해야 하나요

방법을 생각하다가 모니터를 설정해서 라벨을 클릭하면 바로 false를 반환, OK~

$('label').click(function() {return false;
});

$('#label-input').click(function(e) {var elem = e.target;
    console.log(elem.tagName);
})