javascript - 为什么触发点击 contenteditable 不会激活元素并设置光标

Question

我希望 contenteditable 在模拟点击事件上通过光标激活，但这并没有发生——该元素没有被激活。为什么？我需要将光标放在与用户单击的位置完全相同的位置，这就是我使用 click 事件的原因，因为它包含坐标。

我创建了 this演示问题的简单设置(在 contenteditable div 内单击):

HTML

<div contenteditable="true" style="width: 100px; height: 100px; border: 1px solid black;">some text</div>

JS

$(function() {
    var editable = $('[contenteditable]');
    var event, initial = true;
    editable.on('click', function(e) {
        event = e;
        console.log('writing event', event);

        if (initial) {
            initial = false;
            editable.blur();
            setTimeout(function() {
                console.log('trigger click');
                editable.trigger(e);
            }, 3000);
        }
    });
});

Answer 1

我相信您希望触发 focus 事件，该事件会将光标置于框中并允许您编辑内容，而无需实际单击 div 内部。这就是您想要做的吗？

$(function() {
  var editable = $('[contenteditable]');
  setTimeout(function() {
    editable.trigger('focus');
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" style="width: 100px; height: 100px; border: 1px solid black;">some text</div>