双击导航选择后面的div，即使没有文本.我该如何阻止它

Question

我有一个带有导航箭头的滑块，当双击箭头时，#slider1后面的div，即.content-wrapper会被选中，如下所示：

http://gyazo.com/e66ab776b60455d8b496b46e3077099a

若箭头被单击，它是可以的，像它应该的工作，但双击会做出这个奇怪的选择。我该怎么阻止？

我已经尝试过这里建议的stackoverflow方法，比如：

$('.arrow').dblclick(function(){
    return false;
});

和

$('.arrow').dblclick(function(event){
    event.preventDefault();
});

但没用。

这是html结构：

<div class="content-wrapper">
    <h2>Some long enough title</h2>
    <div class="red-divider" style="margin-bottom: 50px"></div>
    <div class="items">
        <div class="arrow left-small"></div>
        <div id="slider1">
            <ul>
                <li>
                    <div class="item">
                        <img src="img/item1.png" height="59" width="72" alt="">
                        <p>Some product description text goes right here</p>
                    </div>
                </li>
                <li>
                    <div class="item">
                        <img src="img/item1.png" height="59" width="72" alt="">
                        <p>Some product description text goes right here</p>
                    </div>
                </li>
                <li>
                    <div class="item">
                        <img src="img/item1.png" height="59" width="72" alt="">
                        <p>Some product description text goes right here</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="arrow right-small"></div>
    </div>
</div>

箭头显然是.arrow left-small和.arrow right-small。

请告诉我是否应该在这里发布所有jQuery代码和CSS样式。

谢谢。

编辑：

以下是所有元素的CSS：

.content-wrapper {
width: 1080px;
height: 100%;
margin: 0 auto;
padding: 0 28px;
position: relative;
}
.items {
margin: 0 auto;
}
#slider1 {
overflow: hidden;
margin: 0 auto;
}
#slider1 ul {
position: relative;
height: 124px;
margin: 0;
padding: 0;
list-style: none;
}
#slider1 ul li {
width: 320px;
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
}
.item {
display: inline-block;
width: 300px;
vertical-align: top;
background-color: #fff;
border-radius: 5px;
padding: 30px 10px;
}
.arrow {
position: absolute;
top: 55%;
width: 27px;
height: 51px;
display: inline-block;
margin-top: 35px;
cursor: pointer;
z-index: 100;
}

.left-small设置背景图像和left:

第2版：

还有小提琴http://jsfiddle.net/55pewvb9/

第3版：

这是space-masters.com/samsung/的完整页面

Answer 1

添加：

.arrow left-small {
z-index: 100;
}
.arrow right-small {
z-index: 100;
}

这应该有效。。。

如果你想要一个更深思熟虑的答案，你应该发布所有的css

Answer 2

我觉得不错。与其用div来表示箭头，不如试着用锚点。它们更适合于点击事件，并且在语义上更适合。因此，改变：

<div class="arrow left-small></a>

进入：

<a class="arrow left-small></a>

以下是一个基于HTML和CSS的工作示例：

http://jsfiddle.net/uLnx4m77/2/