爲什麼觸發單擊contenteditable不會激活元素並設置光標

Question

我希望在模擬的單擊事件中使用光標變爲活動狀態，但這不會發生 - 元素不會被激活。爲什麼？我需要將光標放在與用戶單擊位置完全相同的位置，這就是爲什麼我使用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>