爲什麼我不能滾動這個列表（在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;