mousedown 과 checkbox

별거 아닌 거 같지만 정리하면 좋을 것 같아서 남겨본다.

상황은 이렇다.

html table 의 row를 클릭하면

해당 row의 존재하는 checkbox가 클릭되는 경우를 javascript+jquery로 구현하고자 했다.

간단한 table 과 js 함수를 구성해보자

<div>
  <table id="table">
    <thead>
      <tr>
        <td>check</td>
        <td>column1</td>
        <td>column2</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox"/></td>
        <td>hoonzi</td>
        <td>blog</td>
      </tr>
    </tbody>
  </table>
</div>

해당 html의 결과는 이렇게 보인다.

 

html code 실행 결과

여기서 나는 checkbox 이외의

hoonzi 혹은 blog를 클릭하더라도 같은 row상에 존재하는 checkbox가 체크 되었으면 한다.

js 이벤트 함수를 짜 준다.

$("#table tbody tr").on("mousedown", function() {
	let checkbox = $(this).find("input[type='checkbox']");
  	if($(checkbox).prop("checked") == false) {
  		$(checkbox).prop("checked", true);
  	}
})

이벤트로 mousedown을 선택한 이유는 mousedown 상태로 row를 넘으면(mouseover),

마우스가 눌린채로 넘어간 row에 대해서 선택이 되게끔 구현하기 위해 mousedown 이벤트로 구현했다.

하지만 이러면 문제가 생기는데, 바로 checkbox를 눌렀을때 체크가 되었다가 바로 체크가 풀리는 현상이 발생한다!

 

mousedown 이벤트와 checkbox 의 checked 간의 문제가 있는 것 같은데...

https://stackoverflow.com/questions/52686176/how-can-i-check-the-checkbox-with-mousedown-event

How can I check the checkbox with mousedown event?

위 링크에 답이 나와있다. 나는 다른방식으로 풀었지만 원인에 대해 정리하자면

1. checkbox 클릭 (mousedown)
2. table tbody tr 의 요소가 클릭된걸 인지
3. 해당 시점에서 checkbox는 checked 가 되지 않았으므로 checkbox 를 checked로 변경
4. mousedown이 mouseup 이 되는 순간 checkbox의 원래로직 동작 (mousedown → mouseup (click) 시 checked true/false 변경
5. jquery 이벤트에 의해 checked된 checkbox가 checked false로 변경 (체크풀림)

 

이러한 연유로 저 이벤트를 사용할 경우 checkbox클릭시 check가 두번씩 발생하는 현상이 나타나는 것이다.

나는 이 문제를 이렇게 풀었다.

1. checkbox 클릭 (mousedown)
2. table tbody tr 의 요소가 클릭된걸 인지
3. 현재 mousedown된 요소가 input[type=”checkbox”] 가 아니라면!!
4. 해당 시점에서 checkbox는 checked 가 되지 않았으므로 checkbox 를 checked로 변경

수정된 코드이다.

$("#table tbody tr").on("mousedown", function(e) {
	let checkbox = $(this).find("input[type='checkbox']");
  	if(e.target.tagName!= "INPUT"){ //3번 항목에 해당하는 조건문이 추가되었다.
  		if($(checkbox).prop("checked") == false) {
      		$(checkbox).prop("checked", true);
    	}
  	}
});

클릭된 요소가 input 이라면 해당 이벤트가 동작하지 않게끔 만들었다.