为什么jQuery ui可选择插件会禁用我原来的绑定单击功能

Question

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

jquery-ui-selectable按所需工作正常，但我所附的单击不起作用。

我在某个地方读过书

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

我的代码看起来就像这样

 $('#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/

我的项目中有类似的代码，其中click不起作用。

注意：，我希望我的答案在jsfiddle中工作，在这里，它工作起来不知道为什么，我的项目不起作用

Answer 1

如果您想要实际的click函数，那么您需要将pointer-events:none添加到该类ui-selectable-helper中，这样单击事件就不是bubbling up。

现场演示：

​

$('#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函数，以获得点击的项目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>

​