abybody 知道如何通过单击选定对象外部来取消选择 Jquery Selectable 吗？ [关闭]答案

【问题标题】：Does abybody know how to unselect Jquery Selectable by clicking outside selected object? [closed]abybody 知道如何通过单击选定对象外部来取消选择 Jquery Selectable 吗？ [关闭]
【发布时间】：2021-06-10 23:09:04
【问题描述】：

如标题所示。我看到jquery没有包含这个选项，有人知道如何自己写吗？但在某个区域内？

就像，我有放置图像的活动区域，我可以选择。但是我希望他们在该区域内单击时取消选择，而不是在单击其他 div 时。

如果您需要尝试想象 Photoshop 界面。类似的东西。您可以单击界面，但在画布窗口（图像区域）内的空白处单击它会取消选择。

【问题讨论】：

标签： javascript jquery user-interface jquery-ui-selectable

【解决方案1】：

由于具有 ui-selected 类的元素是使项目被选中的原因，因此您只需将其删除即可取消选择。

$(document).click(function(event) {
    if (!$(event.target).is("#selectable")) {
        $('#selectable .ui-selected').removeClass('ui-selected')
    }
});

【讨论】：

【解决方案2】：

jQuery($ => {
  $("#selectable").selectable();

  $("#area").on("click", (evt) => {
    $("#selectable").find(".ui-selected").removeClass('ui-selected')
  });
});

/*QuickReset*/ * {margin: 0; box-sizing: border-box;}

#area {
  height: 100vh;
}

#selectable .ui-selected {
  background: red;
}

<div id="area">
  <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>
</div>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

【讨论】：