我有一个 jQuery 可供选择，如下所示。它实际上是一个有序列表。有序列表位于名为 myBorderDiv 的 div 内。
当我按下 control 并将鼠标悬停在项目上时，所有项目都会出现不需要的效果（在 IE8 中），如下图所示。如何克服这个问题？
<html xmlns="http://www.w3.org/1999/xhtml">
<title></title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/sunny/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
//Make it as selectable
$("#myOrderedListSelecatableAsHeaderPart").selectable();
//selectablestop Event Handler
$("#myOrderedListSelecatableAsHeaderPart").bind("selectablestop", function (event) {
var test= "";
$(".ui-selected", this).each(function () {
test+= this.getAttribute("Categoryid") + ",";
});
});
$("button, input:submit").button()
$("button#selectall").click(function (event) {
//When select all button clicked
//Add css class
$("#myOrderedListSelecatableAsHeaderPart li").addClass("ui-selected");
//Trigger the selectablestop event and preventDefault
$("#myOrderedListSelecatableAsHeaderPart").trigger("selectablestop");
event.preventDefault();
});
});
</script>
<style type="text/css">
#myOrderedListSelecatableAsHeaderPart .ui-selected
{
background: #F39814;
color: white;
}
#myOrderedListSelecatableAsHeaderPart
{
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
#myOrderedListSelecatableAsHeaderPart li
{
margin: 3px;
height: 18px;
padding: 3px; /*Display list items in blobk */
display: inline-block;
}
</style>
</head>
<body>
<div>
<h3>
Hold control and click to select multiple items
</h3>
<div>
<div id="myBorderDiv" style="border: 1px solid brown; width:375px;">
<ol id="myOrderedListSelecatableAsHeaderPart" >
<li categoryid="2" class="ui-widget-content">Apple </li>
<li categoryid="4" class="ui-widget-content">Bag </li>
<li categoryid="10" class="ui-widget-content">Cup </li>
<li categoryid="7" class="ui-widget-content">Doll </li>
<li categoryid="8" class="ui-widget-content">Empty </li>
<li categoryid="9" class="ui-widget-content">Football </li>
<li categoryid="10" class="ui-widget-content">Gems </li>
<li categoryid="50" class="ui-widget-content">Horse </li>
<li categoryid="3" class="ui-widget-content">Inter </li>
<li categoryid="4" class="ui-widget-content">JokerCap </li>
<li categoryid="5" class="ui-widget-content">King </li>
<li categoryid="6" class="ui-widget-content">Lemon </li>
<li categoryid="7" class="ui-widget-content">Nail </li>
<li categoryid="8" class="ui-widget-content">One </li>
<li categoryid="9" class="ui-widget-content">Ping </li>
<li categoryid="10" class="ui-widget-content">Quick </li>
<li categoryid="7" class="ui-widget-content">Royal </li>
<li categoryid="8" class="ui-widget-content">Standard </li>
<li categoryid="9" class="ui-widget-content">Train </li>
<li categoryid="10" class="ui-widget-content">Umbrella </li>
<li categoryid="50" class="ui-widget-content">Van </li>
</ol>
</div>
<br />
<button id="selectall">
Select All</button>
</div>
</div>
这段代码删节自此answer将解决问题
$(function(){
$.extend($.fn.disableTextSelect = function() {
$(this).bind('selectstart',function(){return false;});
});
$('#myOrderedListSelecatableAsHeaderPart').disableTextSelect();
});