我为一个项目定制Bootstrap Token字段，我扩展它以支持突出显示令牌，然后按delete或退格键删除所选令牌。我能够实现它，但只能在Firefox以外的其他浏览器上实现。因为在Firefox中，当你在一个输入框上按下鼠标并拖动到其他元素时，鼠标移动事件不会被触发。
我创建了一个JS Fiddle来显示这个
<script>
$( ".token" ).hover(function(){
$(this).css('background-color','red');
});
</script>
<style>
.token {
background-color: lightblue;
width: 100px;
height: 20px;
display: inline-block;
}
</style>
<body>
<div class="token">Token 1</div>
<div class="token">Token 2</div>
<div class="token">Token 3</div>
<input type="text">
</body>
尝试将鼠标放在JS Fiddle的输入框上并拖动到左边的令牌，在其他浏览器中，左边的令牌会突出显示，但在Firefox中不会。输入框的原因是在token字段的右边有一个输入框，这是用户在高亮显示时的自然运动，从输入框开始。当不从输入框开始时高亮显示工作正常。Chrome和其他浏览器似乎在这一点上有点灵活。任何帮助都将不胜感激。谢谢!
对于任何遇到同样问题的人，这是我提出的解决方案，如果我检测到还没有输入(这也意味着用户的意图不是选择输入框上的文本)，则调用e.p preventdefault()来取消mousedown事件，因此悬停将突出显示令牌。我创建了一个更新的JS Fiddle来说明这一点。
$( "#inputtext" ).mousedown(function(e){
if($( "#inputtext" ).val() === ""){
e.preventDefault();
$( "#inputtext" ).focus();
}
});
调用focus()会将光标放回输入框，因为调用preventDefault()会取消鼠标点击并阻止光标出现，focus()会将光标放回输入框。