防止 JqueryUI Accordion Click 取消选择 Contenteditable Div 中的文本答案

【问题标题】：Prevent JqueryUI Accordion Click From Deselecting Text In Contenteditable Div防止 JqueryUI Accordion Click 取消选择 Contenteditable Div 中的文本
【发布时间】：2016-09-16 03:20:38
【问题描述】：

我目前正在使用document.execCommand() 在内容可编辑的 div 中设置文本样式。我想将控制元素放在 JqueryUI 手风琴中，但是选择菜单的行为很奇怪。

因为我的选择元素放置在 JqueryUI 手风琴的窗格上，所以只要触发 mousedown 事件，就会取消选择 contenteditable 字段中的选定文本。有没有办法在第一次点击选择元素后禁用/阻止 mousedown 事件的传播？或者更重要的是，在取消选择 contenteditable 文本中的文本之前，能够单击选择菜单并通过选择元素的 onchange 事件选择一个项目来触发我的 document.execCommand() 的任何方式？

我尝试了以下方法，但它也会阻止选择菜单打开。 #propertiesPanel 是选择菜单所在的实际手风琴窗格。

另外，为了澄清，窗格已经打开，我在 contenteditable div 中选择文本，我只是试图单击选择元素以下拉并更改文本大小（例如）。当不使用 JqueryUI 手风琴时，完全相同的过程不会取消选择文本。

$('#propertiesPanel').mousedown(
    function(event){
        event.preventDefault();
    }
);

上面的简单 stopPropegation 版本根本没有做任何事情。

$('#propertiesPanel').mousedown(
    function(event){
        event.stopPropagation();
        event.stopImmediatePropagation();
    }
);

另外，我刚刚尝试过，但它不起作用，但也许这比改变事件更容易接受？

$("#propertiesPanel").children().css({userSelect: 'none'});

我正在尝试的另一种方法是在整个面板上使用return false。它不会取消选择文本，但也不允许选择元素下拉。

$('#propertiesPanel').mousedown(function(){
    return false;
});

【问题讨论】：

标签： javascript jquery html jquery-ui

【解决方案1】：

您是否尝试过使用类似的东西，

$(".something").click(function() {
  $("input.whatever").focus();
});

【讨论】：

你能解释一下在这种情况下它是如何工作的吗？这个想法不是改变焦点，因为这会从 contenteditable div 中取消选择文本。

【解决方案2】：

最终找到了解决方案。这是一个相当繁重的解决方案，但似乎可以使用 rangy 插件跨浏览器工作。

https://github.com/timdown/rangy

    var savedSel = null;
    function saveSelection() {
        if (savedSel) {
            rangy.removeMarkers(savedSel);
        }
        savedSel = rangy.saveSelection();
    }
    function restoreSelection() {
        if (savedSel) {
            rangy.restoreSelection(savedSel, true);
            savedSel = null;
        }
    }
    window.onload = function() {
        // Turn multiple selections on in IE
        try {
            document.execCommand("MultipleSelection", null, true);
        } catch(ex) {}
        rangy.init();
    }

我在 mousedown 和 restoreSelection() 上调用 saveSelection()，就在实际 onchange 事件的 document.execCommand 之前。我将把这个问题留给其他有更轻松/更优雅的解决方案的人。

【讨论】：