순수한 CSS가 click 이벤트를 수신하고 scroll 이벤트를 트리거하는 이유는 무엇입니까?

다음 스 니펫이 있습니다. 어떤 스크립트도 작성하지 않았고 순수한 CSS이지만 헤더를 클릭하면 이상한 이벤트가 발생합니다. 아래로 스크롤을 클릭하고 헤더를 클릭하면 div 컨테이너가 자동으로 위로 스크롤됩니다. 이 기능을 사용하지 않으려는 원치 않는 이벤트입니다. 누군가 이유를 설명해 주시겠습니까? 어떻게 비활성화 할 수 있습니까?순수한 CSS가 click 이벤트를 수신하고 scroll 이벤트를 트리거하는 이유는 무엇입니까?

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <style> 
 
     table, th, td { 
 
     border: 1px solid black; 
 
     } 
 
     table { 
 
     width: 100%; 
 
     table-layout: fixed; 
 
     background-color: green; 
 
     color: white; 
 
     } 
 
     .container { 
 
     height: 100px; 
 
     overflow-x:hidden; 
 
     overflow-y: auto; 
 
     border: none; 
 
     } 
 
     .section { 
 
     position: relative; 
 
     padding-top: 25px; 
 
     background-color: red; 
 
     } 
 
     th { 
 
     height: 0; 
 
     line-height: 0; 
 
     padding-top: 0; 
 
     padding-bottom: 0; 
 
     color: rgba(0, 0, 0, 0); 
 
     border: none; 
 
     white-space: nowrap; 
 
     } 
 
     .header { 
 
     broder: solid 1px black; 
 
     position: absolute; 
 
     color: black; 
 
     top:10px; 
 
     } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div class="section"> 
 
     <div class="container"> 
 
      <table> 
 
       <col width="130"> 
 
       <col width="80"> 
 
       <tr> 
 
        <th> 
 
        Month 
 
        <div class="header">Month</div> 
 
        </th> 
 
        <th> 
 
        Savings 
 
        <div class="header">Savings</div> 
 
        </th> 
 
       </tr> 
 
       <tr> 
 
        <td>January</td> 
 
        <td>$100</td> 
 
       </tr> 
 
       <tr> 
 
        <td>February</td> 
 
        <td>$80</td> 
 
       </tr> 
 
       <tr> 
 
        <td>January</td> 
 
        <td>$100</td> 
 
       </tr> 
 
       <tr> 
 
        <td>February</td> 
 
        <td>$80</td> 
 
       </tr> 
 
       <tr> 
 
        <td>January</td> 
 
        <td>$100</td> 
 
       </tr> 
 
       <tr> 
 
        <td>February</td> 
 
        <td>$80</td> 
 
       </tr> 
 
       <tr> 
 
        <td>January</td> 
 
        <td>$100</td> 
 
       </tr> 
 
       <tr> 
 
        <td>February</td> 
 
        <td>$80</td> 
 
       </tr> 
 
       <tr> 
 
        <td>January</td> 
 
        <td>$100</td> 
 
       </tr> 
 
       <tr> 
 
        <td>February</td> 
 
        <td>$80</td> 
 
       </tr> 
 
      </table> 
 
     </div> 
 
     </div> 
 
     <p>The col width attribute is not supported in HTML5.</p> 
 
    </body> 
 
</html>

출처

2016-10-23 TSR

아니고 클릭 트리거, 헤더를 클릭하고 마우스 스크롤을 일으키는 원인이 이동 될 때. 그냥 header 클래스에 pointer-events을 해제 : 거의 다 https://jsfiddle.net/8LcLvh93/1/

.header { 
    broder: solid 1px black; 
    position: absolute; 
    color: black; 
    top: 10px; 
    pointer-events: none; 
}

출처

2016-10-23 21:05:31 Swordys

, 내가 나중에 내 자바 스크립트에이 요소를 사용하고자하는 경우에만 때문 스크롤에 대한 포인터 이벤트를 비활성화 할 수 있나요 – TSR

순수한 CSS가 click 이벤트를 수신하고 scroll 이벤트를 트리거하는 이유는 무엇입니까?

답변

관련 문제