이벤트 위임 및 데이터 특성, 요소 텍스트를 클릭하면 null입니다.

Question

데이터 값이 할당 된 내부 div가있는 주 div가 있습니다. 내가 Bootstrap이나 div 구조체를 사용하고 있기 때문에 그것이 맞는지는 모르겠지만 실제 숫자 (버튼의 중심과 같이)를 클릭하면 숫자가 아닌 "null"이 나오고 원하는 숫자가 표시됩니다. 결과. 나는 p 태그 안에 숫자를 넣고 거기에 데이터 값을 할당하려고 시도했지만 그 다음에는 전체 버튼에 대해 "null"을 얻습니다.

div 안에있는 텍스트를 클릭하여 값을 얻을 수있는 방법은 무엇입니까?

당신은 (내가 테스트를 실행되면서 7 항상 null를 돌려 피연산자 버튼을 무시) 여기에 실제 문제를 볼 수 있습니다

https://jsfiddle.net/chuLmpoy/

HTML

<div class="container"> 

    <div class="row output"> 
     <div class="col-xs-12"> 
     <div> 
      <p id="totalNumber"> <strong> </strong> </p> 
     </div> 
     </div> 
     <!--col-xs-12--> 
    </div> 
    <!--rowOutput--> 

    <div class="row1"> 
     <div class="col-xs-3 transparent"> <strong> 7 </strong> </div> 
     <div class="col-xs-3 transparent"><strong> 8 <strong></div> 
    <div class="col-xs-3"><strong> <- <strong></div> 
    <div class="col-xs-3"><strong> C <strong></div> 
    </div><!--row1--> 


    <div class="row1"> 
    <div class="col-xs-3 number"> <p data value="7"><strong>7 </strong> </p></div> 
     <div class="col-xs-3 number" data-value="8"><strong> 8 <strong></div> 
    <div class="col-xs-3 number" data-value="9"><strong> 9 <strong></div> 
    <div class="col-xs-3"><strong>/<strong></div> 
    </div><!--row1--> 

    <div class="row1"> 
    <div class="col-xs-3 number"data-value="4"><strong> 4 </strong> </div> 
     <div class="col-xs-3 number" data-value="5"><strong> 5 <strong></div> 
    <div class="col-xs-3 number" data-value="6"><strong> 6 <strong></div> 
    <div class="col-xs-3"><strong> * <strong></div> 
    </div><!--row1--> 

     <div class="row1"> 
    <div class="col-xs-3 number" data-value="1"><strong> 1 </strong> </div> 
     <div class="col-xs-3 number" data-value="2"><strong> 2 <strong></div> 
    <div class="col-xs-3 number" data-value="3"><strong> 3 <strong></div> 
    <div class="col-xs-3"><strong> - <strong></div> 
    </div><!--row1--> 

     <div class="row1"> 
    <div class="col-xs-3 number" data-value="0"><strong> 0 </strong> </div> 
     <div class="col-xs-3"><strong> . <strong></div> 
    <div class="col-xs-3"><strong> + <strong></div> 
    <div class="col-xs-3"><strong> = <strong></div> 
    </div><!--row1--> 

    </div><!--container--> 

</body> 

JS

"use strict"; 


const numbers = document.querySelector(".container"); 

numbers.addEventListener("click", getEachValue); 

function getEachValue(e){ 

    let clickedValue = e.target.getAttribute('data-value'); 
    console.log(clickedValue); 
    } 

Answer 1

e.target은 strong 요소입니다. 이를 확인하고 .parentNode을 사용하여 상위까지 트래버스해야합니다.

let button = e.target.nodeName === "STRONG" ? e.target.parentNode : e.target 
let clickedValue = e.target.getAttribute("data-value") 

또는 더 나은 아직, 스타일은 CSS로 전부 strong 요소를 버려야합니다.

strong 닫는 태그 중 상당수에 /이 누락되어 있습니다.

---

일반적으로 선택기와 일치하는 조상을 검색 할 때 요소를 탐색하는 기능이 유용 할 수 있습니다.

function up(el, sel, stopEl) { 
    while ((el = el.parentElement) && !el.matches(sel)) { 
    if (stopEl && el === stopEl) { 
     return null 
    } 
    } 

    return el 
} 

이 기능 소자와 셀렉터를 예상하고, 소자로부터 셀렉터 일치 제 조상 반환 조상을 통과한다.

또한 특정 요소에 도달하면 통과를 중지하기 위해 전달할 수있는 선택적인 세 번째 인수가 있습니다. 핸들러가 바인딩 된 요소를 지나치지 않으려는 경우 유용 할 수 있습니다. 귀하의 경우에는

,이처럼 사용할 수 있습니다

let button = up(e.target, "div[data-value]", this) 

Answer 2

클릭 이벤트 대상은 해당 클릭의 위치에 따라, 그래서 당신은 강한 요소 또는 사업부를 클릭하면이 달려있다.

해결책은 click에 대한 모든 가능한 경우가 strong을 클릭하면 부모 노드의 데이터 속성을 읽습니다. div를 클릭하면 div에서 attr을 직접 읽습니다.

요소에 중첩이 여러 개있을 때 상당히 복잡해집니다.

가장 쉬운 방법은 CSS에서 강력하고 스타일링을 제거하는 것입니다.