0

这是我的代码：

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。

为什么会有这种行为？我该如何解决这个问题？

4

2 回答 2

3

只需 href="javascript:void(0);"从您的代码中删除

更新：执行上一个方法或仅附加onmousedown="return false;"到a标签

于 2012-06-13T08:52:33.383 回答
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;
于 2012-06-13T08:54:34.170 回答