优化JavaScript事件处理：使用标志位控制多个事件的执行

<div>
  <div onclick="event1()" style="background: lightblue; padding: 10px; margin: 5px;">事件1</div>
  <div onclick="event2()" style="background: lightgreen; padding: 10px; margin: 5px;">事件2</div>
  <div onclick="event3()" style="background: lightcoral; padding: 10px; margin: 5px;">事件3</div>
</div>

let readOnly = false; // 假设这是一个全局或组件状态

const event1 = () => {
    if (!readOnly) {
        console.log("事件1执行：执行某些操作...");
    } else {
        console.log("事件1被阻止：只读模式");
    }
};

const event2 = () => {
    if (!readOnly) {
        console.log("事件2执行：执行另一些操作...");
    } else {
        console.log("事件2被阻止：只读模式");
    }
};

const event3 = () => {
    if (!readOnly) {
        console.log("事件3执行：执行更多操作...");
    } else {
        console.log("事件3被阻止：只读模式");
    }
};

// 模拟切换只读状态
// setTimeout(() => {
//     readOnly = true;
//     console.log("只读模式已开启！");
// }, 3000);

<div>
  <div onclick="doWhenNotReadOnly(event1)" style="background: lightblue; padding: 10px; margin: 5px;">事件1</div>
  <div onclick="doWhenNotReadOnly(event2)" style="background: lightgreen; padding: 10px; margin: 5px;">事件2</div>
  <div onclick="doWhenNotReadOnly(event3)" style="background: lightcoral; padding: 10px; margin: 5px;">事件3</div>
</div>

let readOnly = false; // 全局或组件状态

const doWhenNotReadOnly = (actionFunction) => {
    if (readOnly) {
        console.log("操作被阻止：只读模式已激活。");
        return;
    }
    actionFunction(); // 执行实际的事件逻辑
};

const event1 = () => {
    console.log("事件1执行：生成随机数 " + Math.random());
};

const event2 = () => {
    alert("您点击了我！");
};

const event3 = () => {
    if (confirm("是否打开 https://www.example.com?")) {
        window.open("https://www.example.com");
    }
};

// 模拟切换只读状态
// setTimeout(() => {
//     readOnly = true;
//     console.log("只读模式已开启！");
// }, 3000);

<style>
div.event-box {
  background: red;
  border: 2px outset green;
  width: 100%;
  height: 50px; /* 调整高度 */
  margin: 5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer; /* 添加光标样式 */
  color: white; /* 文字颜色 */
  font-weight: bold;
}
</style>

<div>
  <div class="event-box" onclick="executeEventIfAllowed(1);">点击执行事件1</div>
  <div class="event-box" onclick="executeEventIfAllowed(2);">点击执行事件2</div>
  <div class="event-box" onclick="executeEventIfAllowed(3);">点击执行事件3</div>
  <div class="event-box" onclick="executeEventIfAllowed(4);">点击执行事件4</div>
</div>

let readOnly = false; // 全局或组件状态

function executeEventIfAllowed(eventType) {
  if (readOnly) {
    console.log(`事件 ${eventType} 被阻止：只读模式已激活。`);
    return;
  }

  switch (eventType) {
    case 1:
      console.log("事件1执行：生成随机数 " + Math.random());
      break;
    case 2:
      alert("您点击了集中式事件处理！");
      break;
    case 3:
      if (confirm("是否打开 https://majorflux.codehs.me?")) {
        window.open("https://majorflux.codehs.me");
      }
      break;
    case 4:
      console.error("事件4执行：255.255.255.255.255.255 是一个无效的IP地址！");
      break;
    default:
      console.warn("未知事件类型: " + eventType);
  }
}

// 模拟切换只读状态
// setTimeout(() => {
//     readOnly = true;
//     console.log("只读模式已开启！");
// }, 3000);