羽毛笔提及：单击列表时触发事件

问：

我正在运行 Quill Mention，我想在单击建议列表时获取用户 ID。

形式：

<form>
    <div id="editor"></div>
    <input type="hidden" id="user_id_field">
</form>

The JS:

async function suggestPeople(searchTerm) {
   const allPeople = [
      { id: 1, value: "Fredrik Sundqvist" },
      { id: 2, value: "Patrik Sjölin" }
   ];
   return allPeople.filter(person => person.value.includes(searchTerm));
}

const quill = new Quill("#editor", {
    placeholder: "Enter @",
    modules: {
        mention: {
            allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
            mentionDenotationChars: ["@"],
            source: async function(searchTerm, renderList) {
                const matchedPeople = await suggestPeople(searchTerm);
                renderList(matchedPeople);
            }
        }
    }
});

window.addEventListener("mention-clicked", function(event) {
    const userId = event.detail.id;
    console.log(userId);
});

当我点击用户名时，会触发事件“mention-clicked”

<div id="editor">

但我希望当我单击建议列表时触发它。

我试过了，但没有运气：

document.addEventListener("DOMContentLoaded", function() {
   const editor = document.getElementById("editor");
   const suggestionsList = document.getElementById("quill-mention-list");

   if (suggestionsList) {
      editor.addEventListener("click", function(event) {
         const target = event.target;
         if (target === suggestionsList || suggestionsList.contains(target)) {
            console.log('click');
         }
      });
   }
});