DIV常见任务(上) —常规任务(显示滚动条/隐藏div/禁止事件冒泡等等)

DIV常见任务(上) —常规任务(显示滚动条/隐藏div/禁止事件冒泡等等)

在网页设计过程中，我们常常需要对页面进行一些操作，如显示滚动条、隐藏 div、禁止事件冒泡等等。HTML 和 CSS 提供了丰富的标签和属性，可以方便地实现这些操作。以下是一些常见任务及对应的解决方案。

有时，我们会想要在页面显示滚动条，以便用户能够滚动页面。为此，我们可以使用 CSS 中的 overflow 属性来实现。

/* 显示滚动条 */
body{
  overflow-y: scroll; /* 显示垂直滚动条 */
}

/* 隐藏滚动条 */
body{
  overflow: hidden; /* 隐藏滚动条 */
}

在上述代码中，我们通过设置 body 元素的 overflow 属性来实现滚动条的显示或隐藏。overflow 属性有三个值可选：visible（默认值，不显示滚动条）、scroll（显示滚动条）、hidden（隐藏滚动条）。

有时候，我们可能需要在页面中隐藏某个 div 元素。为此，我们可以使用 CSS 中的 display 属性。具体做法如下：

/* 隐藏 div */
div.hidden{
  display: none;
}

在上述代码中，我们定义了一个类名为 hidden 的 div 元素，并将 display 属性设置为 none。此时，该 div 元素将不会显示在页面中。我们可以在需要显示该元素的时候，通过 JavaScript 修改 display 属性为 block 或者其他合适的值，来展示该元素。

当一个元素上触发了事件时，该事件会从顶层元素往下传递，直到被触发的元素。这种事件传递叫做事件冒泡。有时候我们需要禁止事件冒泡，以避免事件被顶层元素以外的其他元素捕获。

<!-- HTML 代码 -->
<div class="outer" onclick="alert('outer')">
  <div class="inner" onclick="alert('inner')">
    Click me
  </div>
</div>

/* JS 代码 */
document.querySelector('.inner').addEventListener('click', function(e){
  e.stopPropagation(); /* 阻止事件冒泡 */
});

在上述代码中，我们定义了两个 div 元素，一个是外层容器 div.outer，一个是内层容器 div.inner。当用户点击内层容器时，内部添加了一个事件监听器，通过调用事件对象的 stopPropagation() 方法来阻止事件向外传递，从而禁止了事件冒泡。

这里需要注意的是，stopPropagation() 方法只能阻止事件向上（父元素）传递，而不能阻止事件向下传递。如果需要禁止事件冒泡且取消默认行为，可以使用 preventDefault() 方法。