即使没有文本，双击 nav 也会选择它后面的 div。我该如何阻止它？答案

【问题标题】：Double click on nav selects div behind it even there is no text. How do I stop it?即使没有文本，双击 nav 也会选择它后面的 div。我该如何阻止它？
【发布时间】：2014-11-20 01:09:44
【问题描述】：

我有一个带有导航箭头的滑块，当双击箭头时，#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:

EDIT2：

这也是小提琴http://jsfiddle.net/55pewvb9/

EDIT3：

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

【问题讨论】：

标签： jquery html selection double-click

【解决方案1】：

我觉得不错。尝试使用锚点，而不是使用 div 作为箭头。它们更适合点击事件，并且在语义上更适合。因此，改变：

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

进入：

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

这是一个基于您的 HTML 和 CSS 的工作示例：

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

【讨论】：

感谢@Tom 的选择，但选择仍在进行中。
我在重现您的问题时遇到了一些麻烦。你小提琴太简单了，并没有显示问题。你提供的另外一个链接也有问题，我连点击都不行。

【解决方案2】：

添加：

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

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

应该可以的...

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

【讨论】：

你可以用小提琴发布你的css吗？
@nrvnm 所以点击 .arrow 滑动#slider。为什么人们甚至会双击它？我不知道您的脚本是如何设置的，但是，如果您将 .arrow 放在 html 中的 #items div 之外会发生什么？
我尝试将.arrow 移到.items 之外，但没有任何改变。对于使用鼠标不太灵巧的人或双击检测的单击之间的延迟太长，很容易意外双击而不是单击。当它发生在我的页面上时，那个蓝色的大选择看起来很奇怪，而且它不会自行消失。