为什么我不能滚动这个列表（在Firefox上）？看来这会拖累我的元素

Question

这是我code：

HTML

<div class="box-booking-item"> 
    <a href="javascript:void(0);" class="box-booking-item-content"> 
     <span class="box-booking-tendina"> 
      <span id="tendina_128" class="box-booking-tendina-elemento">Field 1</span> 
      <span id="tendina_147" class="box-booking-tendina-elemento">Field 2</span> 
      <span id="tendina_149" class="box-booking-tendina-elemento">Field 3</span> 
      <span id="tendina_151" class="box-booking-tendina-elemento">Field 4</span> 
      <span id="tendina_152" class="box-booking-tendina-elemento">Field 5</span> 
     </span> 
    </a> 
</div>  

CSS

.box-booking-item 
{ 
    position:relative; 
    width:100px; 
} 

.box-booking-item-content 
{ 
    width:100%; 
    cursor:pointer; 
} 
.box-booking-tendina 
{ 
    display:block; 
    overflow-y: scroll; 
    height:80px; 
} 

.box-booking-tendina-elemento 
{ 
    height:22px; 
    display:block; 
} 

尝试，在Firefox（我有12.0，但与10.0和11.0尝试，它是一样的），单击滚动条，然后滚动到向下/向上（按下栏，而不是使用箭头向上和向下）。这就像它“拖动”整个容器div。

为什么会这样？我该如何解决这个问题？

Answer 1

刚刚从你的代码

UPDATE删除href="javascript:void(0);"：执行以前的方法，或只是附加onmousedown="return false;"到a标签

Answer 2

您需要从代码中删除href="javascript:void(0);"。也许你应该用一个div替换锚点？

对于下面的评论。

要停止选择文本，您可以使用CSS。

将此代码包含在您想要停止选择的项目上。

-webkit-touch-callout: none; 
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none;