Question

我有以下代码段。我没有编写任何脚本，它只是一个纯粹的Css，但是当我点击标题时会触发一些奇怪的事件。如果单击向下滚动并单击标题，div容器将自动向上滚动。这是一个我想要禁用它的不需要的事件。有人可以解释一下原因吗？以及如何禁用它？

＆＃13;

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

＆＃13;

Answer 1

它不会在点击时触发，单击标题并且鼠标移动时会导致滚动。只需在pointer-events课程上停用header： https://jsfiddle.net/8LcLvh93/1/

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

为什么纯Css会侦听click事件并触发滚动事件？

1 个答案: