如何在JavaScript中修改两个click EventListener以实现相反交互功能

修改方案 #

核心调整逻辑 #

你需要新增一个全局变量存储当前选中的文字/空格元素，再把两个点击事件的触发逻辑互换：

1. 点击文字/空格时：仅记录当前选中的元素，可添加选中状态给用户明确反馈
2. 点击工具栏标记按钮时：如果已选中目标元素，就对该元素执行标记添加/移除操作

完整修改后代码 #

// 新增全局变量：存储当前选中的目标元素
let selectedElement = null;
// 可在样式文件中添加 .selected { outline: 2px solid #1677ff; } 作为选中状态提示

var classlist = el.querySelectorAll(".letter, .space");
for (var i = 0; i < classlist.length; i++) {
  classlist[i].addEventListener("click", function(event) {
    // 先清空之前的选中状态
    if (selectedElement) {
      selectedElement.classList.remove('selected');
    }
    // 存储当前选中的元素，沿用原有元素判定规则
    let curElement = this.parentNode;
    if (
      tooltype === "longVowel" ||
      tooltype === "shortVowel" ||
      this.classList.contains("space") === true
    ) {
      curElement = this;
    }
    selectedElement = curElement;
    // 添加选中状态
    selectedElement.classList.add('selected');
  });
}

var classlist = el.querySelector(".toolbar").querySelectorAll("li");
for (var i = 0; i < classlist.length; i++) {
  classlist[i].addEventListener("click", function(event) {
    tooltype = this.className;
    // 没有选中目标元素直接终止逻辑
    if (!selectedElement) return;

    // 原写在元素点击事件里的标记逻辑挪到此处
    var add = true;
    var checklist = selectedElement.querySelectorAll("." + tooltype);
    if (checklist.length > 0) {
      add = false;
    }

    socket0s6.emit("action", {
      slide: demo6,
      action: "markingWords",
      element: selectedElement.id,
      class: tooltype,
      add: add,
    });
    // 可选：标记完成后自动清空选中状态，放开下面两行注释即可
    // selectedElement.classList.remove('selected');
    // selectedElement = null;
  });
}

document.getElementById("slideContainer").appendChild(el);

/*}

//var oReq = new XMLHttpRequest();
//oReq.addEventListener("load", reqListener);
//oReq.open("GET", "slides/lesson0/slide6.html");
//oReq.send();*/

/*************** Server action ******************/
//socket0s6.on('action', function(details) {
var socket0s6 = {
  emit: function(a, details) {
    //  //console.log(details[1]);
    if (details.slide === demo6 && details.action === "markingWords") {
      //document.getElementById(details.element).classList.toggle("active");
      if (details.add) {
        var el = document.createElement("span");
        el.className = details.class;
        document.getElementById(details.element).appendChild(el);
      } else {
        //where we will put code to find and remove existing marks
        var markList = document
          .getElementById(details.element)
          .querySelectorAll("." + details.class);
        console.log(markList);
        for (var i = 0; i < markList.length; i++) {
          markList[i].parentNode.removeChild(markList[i]);
        }
      }
    }
  },
};

内容的提问来源于stack exchange，提问作者kitkat