为什么 jQuery ui selectable 插件禁用了我原来绑定的点击功能

Question

jquery.ui-selectable当我附加到一行时，我的正常点击有问题

jquery-ui-selectable 可以正常工作，但我的附加点击不起作用

我读过某处要做的事

e.metaKey = false; //true i did both, but did not work

我的代码在 jsfiddle 中看起来像这样

 $('#selectable').selectable({filter:'li'})

/* $('#selectable').bind("mousedown", function (e) {

           e.metaKey = true;

 }).selectable() */

 

 

 $('#selectable li').bind("click", function (e) {

    alert('clicked item : '+$(this).text());

});

问题：我希望我的附件click能像我们期望的那样正常工作。

这是演示： http: //jsfiddle.net/eabangalore/71xvp5ko/

我的项目中有类似的代码，但点击不起作用

注意：我希望我的答案在 jsfiddle 中有效，这里的片段有效不知道为什么，我的项目无效

Answer 1

如果你想要实际的click功能，那么你需要添加pointer-events:none到这个类ui-selectable-helper，这样点击事件就不会bubbling发生。现场演示：$('#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" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><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- 无需执行其他操作bind或功能即可根据需要click获取单击的项目text() 。li现场工作演示：$('#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" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><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>