javascript - 禁用防止 ancor 'a' 标签的默认值

Question

我有这样的滚动 div 图像

HTML 代码

<div class="side">
      <div class="data" id="data-1">
        <img src="https://images.unsplash.com/photo-1600247354058-a55b0f6fb720?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
        <span> ID = data-1</span>
        <hr>
      </div>
      <div class="data" id="data-2">
        <img src="https://images.unsplash.com/photo-1599687350452-f60014809d2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
        <span> ID = data-2</span>
        <hr>
      </div>
      ...
   </div>

CSS 代码

.side{
      display: block;
      background: salmon;
      width: 350px;
      height: 100vh;
      overflow: auto;
    }
.side img{
      display: block;
      padding: 10px;
      width: 150px;
      height: 150px;
      object-fit: cover;
      object-position: center;
    }

每个图像都有一个唯一的 ID，例如 id='data-1'

然后在下面，我有一个指向每个图像的链接 HTML 代码

<div>
      <ul>
        <li>
          <a href="#data-1">Link to image id data-1</a>
        </li>
        <li>
          <a href="#data-2">Link to image id data-2</a>
        </li>
        <li>
          <a href="#data-3">Link to image id data-3</a>
        </li>
        <li>
          <a href="#data-4">Link to image id data-4</a>
        </li>
        <li>
          <a href="#data-5">Link to image id data-5</a>
        </li>
      </ul>
    </div>

默认情况下，当我单击链接时，Windows 页面将转到顶部。 这就是我想避免的

而我想要的结果是数据仍然在div滚动页面的顶部，但是windows页面不会去任何地方

Answer 1

如果你想阻止 anchor 标记的默认行为，那么你需要将点击事件绑定(bind)到 anchor 标记并调用 event.preventDefault()。

$('a').click(function(event){
    event.preventDefault();
})

.side{
  display: block;
  background: salmon;
  width: 350px;
  height: 100vh;
  overflow: auto;
}
.side img{
  display: block;
  padding: 10px;
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side">
    <div class="data" id="data-1">
        <img src="https://images.unsplash.com/photo-1600247354058-a55b0f6fb720?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
        <span> ID = data-1</span>
        <hr>
    </div>
    <div class="data" id="data-2">
        <img src="https://images.unsplash.com/photo-1599687350452-f60014809d2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
        <span> ID = data-2</span>
        <hr>
    </div>
    ...
</div>
<div>
    <ul>
        <li>
          <a href="#data-1">Link to image id data-1</a>
        </li>
        <li>
          <a href="#data-2">Link to image id data-2</a>
        </li>
        <li>
          <a href="#data-3">Link to image id data-3</a>
        </li>
        <li>
          <a href="#data-4">Link to image id data-4</a>
        </li>
        <li>
          <a href="#data-5">Link to image id data-5</a>
        </li>
    </ul>
</div>