Question

我被建议使用javascript：void（0）以避免在锚标记点击期间意外向下滚动。有人告诉我这样使用它：

<a href="javascript:void(0)">Click Me</a>

现在，如果已经引用了锚标记，请说：

<a href="#carousel-main">Click Me</a>

如何使用javascript：void（0）来避免在点击锚标记时出现不必要的页面移动？

这是轮播代码：

<div class="col-md-12 column">
 <div class="carousel slide" data-ride="carousel" data-interval="5000" id="carousel-main">
  <ol class="carousel-indicators">
     <li  class="active"  data-slide-to="0" data-target="#carousel-main"></li>
     <li  data-slide-to="1" data-target="#carousel-main"></li>
     <li  data-slide-to="2" data-target="#carousel-main"></li>
     <li  data-slide-to="3" data-target="#carousel-main"></li>
  </ol>
  <div class="carousel-inner">
     <div class="item active">
        <img class="home-img-slideshow" title="Banner1" alt="Banner1" src="image-1.jpg" />
     </div>

     <div class="item">           
        <img class="home-img-slideshow" title="Lorem Ipsum Lorem Ipsum" alt="Lorem Ipsum Lorem Ipsum" src="image-2.jpg" />
     </div>

     <div class="item">
        <img class="home-img-slideshow" title="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum" alt="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum" src="image-3.jpg" />

     </div>

     <div class="item">
        <img class="home-img-slideshow" title="Lorem Ipsum " alt="Lorem Ipsum " src="image-4.jpg" />            
     </div>
  </div>

  <a class="left carousel-control" href="#carousel-main" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#carousel-main" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

Answer 1

void(0)将返回undefined，这将阻止默认操作。在链接的情况下，默认操作是导航。

然而，这是一种反模式，在void(0)中添加src之前，您应该考虑三次。对于（主要）可访问性原因，您最可能希望在示例中使用按钮元素。经验法则非常简单：

如果导航到其他页面 - 请使用链接
如果它在当前页面上发生了某些变化 - 请使用按钮。

关于使用链接作为按钮的可用性影响已经写了很多，有些可以在这里找到：

Answer 2

现在，如果已经引用了锚标记，请说：

<a href="#carousal-main">Click Me</a>

如何使用javascript：void（0）来避免不必要的页面移动点击锚标签？

您需要编写Jquery并阻止click事件。试试这个

 $(function(){
    $('a[href="#carousal-main"]').on('click',function(e){
       e.preventDefault(); // this will make sure it doesnt scroll.
    });
 });

由于事件冒泡，此脚本不会影响您的carousal功能。

javaScript的用法：void（0）

2 个答案: