Warum ein reines Css Klickereignis zuhören und Scroll-Ereignis auslöst?

Ich habe das folgende Snippet. Ich habe kein Skript geschrieben und es ist ein reines CSS, aber einige seltsame Ereignisse werden ausgelöst, wenn ich auf die Header klicke. Wenn Sie nach unten scrollen und auf die Header klicken, wird der div-Container automatisch nach oben scrollen. Dies ist ein unerwünschtes Ereignis, das ich deaktivieren möchte. Kann mir bitte jemand erklären warum? Und wie kann ich es deaktivieren?Warum ein reines Css Klickereignis zuhören und Scroll-Ereignis auslöst?

<!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>

Quelle

2016-10-23 TSR

Sein nicht auf Klick Triggern, sein, wenn Header geklickt und die Maus bewegt, blättert verursacht. Nur pointer-events auf header Klasse deaktivieren: https://jsfiddle.net/8LcLvh93/1/

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

Quelle

2016-10-23 21:05:31 Swordys

Fast dort ist es möglich, das Zeiger-Ereignis für das Scroll nur zu deaktivieren, weil ich dieses Element auf meinem Javascript verwenden möchte später – TSR

Warum ein reines Css Klickereignis zuhören und Scroll-Ereignis auslöst?

Antwort

Verwandte Themen