为什么我不能滚动这个列表（在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

只需从代码中删除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;