테스트 사이트 - 개발 중인 베타 버전입니다

제이쿼리 미디어 쿼리 문제 채택완료

ango 4년 전 조회 3,492

게시판 목록 스킨(list.skin.php) 에서 창 크기가 768 픽셀 이하일 때만

표 제목(TBODY TR 부분)을 클릭하면 해당 게시물로 이동하도록 자바스크립트를 짰습니다.

 

문제는 창 크기를 줄였다가 크게 늘리면

768 이상인데도 클릭이 됩니다.

 

어떻게 수정해야 하나요?

 

</p>

<p><script></p>

<p>const trChangeMediaQuery = window.matchMedia('(max-width: 767px)')</p>

<p> </p>

<p>function mobileTableRowChange(e) {

  if (e.matches) {

    $('#bo_list .tbl_head01 tbody tr').click(function() {

      window.location = $(this).find('.bo_tit a').attr('href');

    });

  } else {

    $(this).find('.bo_tit a').removeAttr("href");

  }

}</p>

<p> </p>

<p>trChangeMediaQuery.addListener(mobileTableRowChange)</p>

<p> </p>

<p>mobileTableRowChange(trChangeMediaQuery)</p>

<p></script></p>

<p>

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트

화면이 커졌을때 addListener를 삭제해주는 스크립트도 짜야되지 않을까싶네요

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

    $('#bo_list .tbl_head01 tbody tr').click(function() {
if( 창크기>768)
      window.location = $(this).find('.bo_tit a').attr('href');
    });

이러면 되지 않을까요?

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

j
4년 전

일반적으로 인터넷 창화면을 줄였다 늘렸다 만으론 그때그때 사이트가 측정을 못하기 때문에

사용자가 특정 행동을 취했을때 리프레쉬를 시켜줘야하는데

reload로 새로고침을 해주면 작동할 것으로 생각됩니다

 

 

외에 구글링으로 reload 를 검색해보시면 관련 자료를 찾으실수 있을거에요!

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인