如果你想要實際的click功能，那么你需要添加pointer-events:none到這個類ui-selectable-helper，這樣點擊事件就不會bubbling發(fā)生。
現(xiàn)場演示：
$('#selectable').selectable({
? filter: 'li',
})
$("#selectable > li").on('click',function() {
? console.log($(this).text());
});
#feedback {
? font-size: 1.4em;
}
#selectable .ui-selecting {
? background: #FECA40;
}
#selectable .ui-selected {
? background: #F39814;
? color: white;
}
#selectable {
? list-style-type: none;
? margin: 0;
? padding: 0;
? width: 60%;
}
#selectable li {
? margin: 3px;
? padding: 0.4em;
? font-size: 1.4em;
? height: 18px;
}
.ui-selectable-helper {
? pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" >
<ol id="selectable">
? <li class="ui-widget-content">Item 1</li>
? <li class="ui-widget-content">Item 2</li>
? <li class="ui-widget-content">Item 3</li>
? <li class="ui-widget-content">Item 4</li>
? <li class="ui-widget-content">Item 5</li>
? <li class="ui-widget-content">Item 6</li>
? <li class="ui-widget-content">Item 7</li>
</ol>
您可以簡單地使用插件的選定方法jQuery selectable- 無需執(zhí)行其他操作bind或功能即可根據(jù)需要click獲取單擊的項目text() 。li
現(xiàn)場工作演示：
$('#selectable').selectable({
? filter: 'li',
? selected: function(event, ui) {
? ? var selectedLi = $(ui.selected).text()
? ? console.log(selectedLi); //clicked li item text
? }
})
#feedback {
? font-size: 1.4em;
}
#selectable .ui-selecting {
? background: #FECA40;
}
#selectable .ui-selected {
? background: #F39814;
? color: white;
}
#selectable {
? list-style-type: none;
? margin: 0;
? padding: 0;
? width: 60%;
}
#selectable li {
? margin: 3px;
? padding: 0.4em;
? font-size: 1.4em;
? height: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" >
<ol id="selectable">
? <li class="ui-widget-content">Item 1</li>
? <li class="ui-widget-content">Item 2</li>
? <li class="ui-widget-content">Item 3</li>
? <li class="ui-widget-content">Item 4</li>
? <li class="ui-widget-content">Item 5</li>
? <li class="ui-widget-content">Item 6</li>
? <li class="ui-widget-content">Item 7</li>
</ol>
