我有以下片段。我没有写任何脚本，它是一个纯 Css，但是当我点击标题时会触发一些奇怪的事件。如果单击向下滚动并单击标题，则 div 容器将自动向上滚动。这是一个不需要的事件，我想禁用它。有人可以解释为什么吗？以及如何禁用它？
<!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>最佳答案
它不会在点击时触发，它会在点击标题和鼠标移动时触发，导致滚动。只需在 header 类上禁用 pointer-events:
https://jsfiddle.net/8LcLvh93/1/
.header {
broder: solid 1px black;
position: absolute;
color: black;
top: 10px;
pointer-events: none;
}
关于html - 为什么一个纯css监听点击事件并触发滚动事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40207696/