为什么单击拖动手柄不会窃取文本焦点？答案

【问题标题】：Why does clicking a drag handle NOT steal away text focus?为什么单击拖动手柄不会窃取文本焦点？
【发布时间】：2013-06-04 19:47:22
【问题描述】：

我在http://jsfiddle.net/MuCeD/2/ 有一个带有一些文本的 div。如果我双击 div 中的“sample”一词，它会突出显示，然后如果我单击页面上的其他任何位置，则文本将不突出显示 - except 如果我单击蓝色拖动手柄第二个盒子。然后“采样”仍然突出显示。

如果删除句柄规范，如下所示，

$('#box').draggable();

因此您可以从左侧框的任意位置拖动，然后您可以单击该框的任意位置而不会丢失文本焦点。

有人明白这里发生了什么吗？拖拽手柄有什么作用来防止偷走焦点？

谢谢

【问题讨论】：

【解决方案1】：

jQuery UI draggable 取消其mousedown 事件。这就是为什么它没有获得焦点，因此不会窃取其他元素的焦点。您可以在可拖动上下文之外使用以下示例。

HTML：

<a href="#">Some link</a>
<a class="not-focusable" href="#">No focus</a>

JavaScript：

$('.not-focusable').mousedown(function (event) {
    return false;
});

【讨论】：

是的！这样可行！谢谢你。但是在继续之前，我想在这种情况下尝试了解一些奇怪的事情。如果不是返回false；在您的 jsfiddle 中，您将 event.stopPropagation() 放在无焦点链接上。您会认为 stopPropagation() 与 return false 具有相同的效果。此外，如果您将 mousedown 替换为 click 则既不返回 false 也不 stopPropagation 将防止焦点被盗。你知道那里发生了什么吗？再次感谢您的帮助。
@Steve 不停止传播不会取消事件。它只是阻止它传播到其他 DOM 元素。 preventDefault() 与返回 false 的作用相同。