event.stopPropagation(); 질문!

event.stopPropagation(); 질문!

QA

event.stopPropagation(); 질문!

본문

안녕하세요! 방금도 글올렸었는데 제가 해결못한부분이 있어가지고 ...

각 영역에 클릭이벤트를 해줘야하는데  그안에 있는 .card_detal__btn 여기에도 클릭이벤트를 해주어야합니다. 

그래서event.stopPropagation(); 이함수를 써서 해결했습니다.

문제는 이 함수가가 첫번째카드에만 먹고 나머지는 먹히지 않습니다 .

순서가 문제인지 아니면 다른방법이 있는지 도움 부탁드립니다 ! ㅠㅠ

   


$(document).ready(function(){
        $(".card_detal__btn").click(function(){
          event.stopPropagation();
            var submenu = $(".media-content__detail");
            if( submenu.is(":visible") ){
              $(".card_detal__btn").css("transform","rotate(0deg)");
                submenu.slideUp();
            }else{
              $(".card_detal__btn").css("transform","rotate(180deg)");
                submenu.slideDown();
            }
        });
       
    });

 

 

 

 

 


 

    <section class="container is-max-desktop afms-wrap afms-wrap__input">
        <div class="pt-5">
            <div class="box afms-box" onClick="">
                <article class="is-relative">
                  <div class="media-content mb-3">
                    <div class="content mb-3">
                      <div class="is-flex is-align-items-center">
                        <span class="afms_tag1">영선</span>
                        <span class="card_title mt-0 ml-1">정기회의 회의록</span>
                        <a class="card_arrow" id="arrowBtn">
                          <span class="iconify card_detal__btn" data-icon="bi:chevron-down" style="font-size: 28px; color: #000;"></span>
                        </a>
                      </div>
                      <p class="has-text-grey-light mt-1">HOW0021-A1</p>
                    </div>
                    <div class="content is-inline-block mr-5 mb-0" >
                      <p class="card_detail">
                          <span class="tit has-text-black-bis is-block">합계수량</span><span class="txt is-block" style="font-size: 15px; font-weight: 800">2,795㎡</span>
                      </p>
                  </div>
                  <div class="content is-inline-block mb-0" >
                      <p class="card_detail">
                          <span class="tit has-text-black-bis is-block">권장 내구연한</span><span class="txt is-block" style="font-size: 15px; font-weight: 800">10년</span>
                      </p>
                  </div>
                  </div>
                  <div class="media-content media-content__detail mb-3 hide">
                    <table class="table is-fullwidth has-text-centered">
                      <thead>
                        <tr>
                          <th>위치</th>
                          <th>세부위치</th>
                          <th>수량</th>
                          <th>수량</th>
                        </tr>
                      </thead>
                      <tfoot>
                        <tr>
                          <td>201동</td>
                          <td>복도</td>
                          <td>15,000㎡</td>
                          <td><span class="afms_tag1 detailBtn">상세</span></td>
                        </tr>
                        <tr>
                          <td>201동</td>
                          <td>복도</td>
                          <td>15,000㎡</td>
                          <td><span class="afms_tag1 detailBtn">상세</span></td>
                        </tr>
                        <tr>
                          <td>201동</td>
                          <td>복도</td>
                          <td>15,000㎡</td>
                          <td><span class="afms_tag1 detailBtn">상세</span></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </article>
              </div>
              <div class="box afms-box" onClick="">
                <article class="is-relative">
                  <div class="media-content mb-3">
                    <div class="content mb-3">
                      <div class="is-flex is-align-items-center">
                        <span class="afms_tag1">영선</span>
                        <span class="card_title mt-0 ml-1">정기회의 회의록</span>
                        <a class="card_arrow" id="arrowBtn">
                          <span class="iconify card_detal__btn" data-icon="bi:chevron-down" style="font-size: 28px; color: #000;"></span>
                        </a>
                      </div>
                      <p class="has-text-grey-light mt-1">HOW0021-A1</p>
                    </div>
                    <div class="content is-inline-block mr-5 mb-0" >
                      <p class="card_detail">
                          <span class="tit has-text-black-bis is-block">합계수량</span><span class="txt is-block" style="font-size: 15px; font-weight: 800">2,795㎡</span>
                      </p>
                  </div>
                  <div class="content is-inline-block mb-0" >
                      <p class="card_detail">
                          <span class="tit has-text-black-bis is-block">권장 내구연한</span><span class="txt is-block" style="font-size: 15px; font-weight: 800">10년</span>
                      </p>
                  </div>
                  </div>
                  <div class="media-content media-content__detail mb-3 hide">
                    <table class="table is-fullwidth has-text-centered">
                      <thead>
                        <tr>
                          <th>위치</th>
                          <th>세부위치</th>
                          <th>수량</th>
                          <th>수량</th>
                        </tr>
                      </thead>
                      <tfoot>
                        <tr>
                          <td>201동</td>
                          <td>복도</td>
                          <td>15,000㎡</td>
                          <td><span class="afms_tag1 detailBtn">상세</span></td>
                        </tr>
                        <tr>
                          <td>201동</td>
                          <td>복도</td>
                          <td>15,000㎡</td>
                          <td><span class="afms_tag1 detailBtn">상세</span></td>
                        </tr>
                        <tr>
                          <td>201동</td>
                          <td>복도</td>
                          <td>15,000㎡</td>
                          <td><span class="afms_tag1 detailBtn">상세</span></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </article>
              </div>
              <div class="box afms-box" onClick="">
                <article class="is-relative">
                  <div class="media-content mb-3">
                    <div class="content mb-3">
                      <div class="is-flex is-align-items-center">
                        <span class="afms_tag1">영선</span>
                        <span class="card_title mt-0 ml-1">정기회의 회의록</span>
                        <a class="card_arrow" id="arrowBtn">
                          <span class="iconify card_detal__btn" data-icon="bi:chevron-down" style="font-size: 28px; color: #000;"></span>
                        </a>
                      </div>
                      <p class="has-text-grey-light mt-1">HOW0021-A1</p>
                    </div>
                    <div class="content is-inline-block mr-5 mb-0" >
                      <p class="card_detail">
                          <span class="tit has-text-black-bis is-block">합계수량</span><span class="txt is-block" style="font-size: 15px; font-weight: 800">2,795㎡</span>
                      </p>
                  </div>
                  <div class="content is-inline-block mb-0" >
                      <p class="card_detail">
                          <span class="tit has-text-black-bis is-block">권장 내구연한</span><span class="txt is-block" style="font-size: 15px; font-weight: 800">10년</span>
                      </p>
                  </div>
                  </div>
                  <div class="media-content media-content__detail mb-3 hide">
                    <table class="table is-fullwidth has-text-centered">
                      <thead>
                        <tr>
                          <th>위치</th>
                          <th>세부위치</th>
                          <th>수량</th>
                          <th>수량</th>
                        </tr>
                      </thead>
                      <tfoot>
                        <tr>
                          <td>201동</td>
                          <td>복도</td>
                          <td>15,000㎡</td>
                          <td><span class="afms_tag1 detailBtn">상세</span></td>
                        </tr>
                        <tr>
                          <td>201동</td>
                          <td>복도</td>
                          <td>15,000㎡</td>
                          <td><span class="afms_tag1 detailBtn">상세</span></td>
                        </tr>
                        <tr>
                          <td>201동</td>
                          <td>복도</td>
                          <td>15,000㎡</td>
                          <td><span class="afms_tag1 detailBtn">상세</span></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </article>
              </div>
        </div>
    </section>

이 질문에 댓글 쓰기 :

답변 2

먹히지 않다는"는 상황이 
구체적으로 무엇인지 알면 좋겠군요.

event.stopPropagation();j

다음에

console.log('here...');

추가해서

콘솔 창에 이 메시지가 나오는지 확인해 보세요.

가끔은 레이어 겹치는 문제로 버튼 이미지가 클릭 자체가 안 되는 경우가 있는데 이걸 확인해 보는 방법입니다.

질문이 잘 이해가 안가네요.

 

element 에 selector를 지정하여 click 이벤트를 받는데

그 element 내부에있는 자식요소에도 click 이벤트가 지정되어 있어서

자식 element 클릭시에도 부모 element 의 스크립트가 동시에 동작한다는건가요?

 

그럼 event.stopPropagation(); 빼버리시고

해당 셀렉터 스크립트 종료단에 return false; 넣으시면 될듯한데요.

답변을 작성하시기 전에 로그인 해주세요.
전체 612
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT