Question

我目前正在使用document.execCommand()在一个可信的div中设置文本样式。我想将控制元素放在JqueryUI手风琴中，但它在选择菜单时表现得很奇怪。

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

我已尝试过以下操作，但它也会停止打开选择菜单。 #propertiesPanel是选择菜单所在的实际手风琴窗格。

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

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

以上简单的stopPropegation版本根本不做任何事情。

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

此外，我刚试过这个并且它不起作用，但也许这比更改事件更可接受？

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

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

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

Answer 1

您是否尝试使用类似

的内容

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

Answer 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＆amp; amp;上致电saveSelection() restoreSelection()，就在实际onchange事件的document.execCommand之前。我会把这个问题留给那些拥有更轻松/更优雅解决方案的人。

防止JqueryUI手风琴单击取消选择Contenteditable Div中的文本

2 个答案: