如何在Dulst中为每张卡牌创建专属自定义离场事件

实现思路 #

• 先封装通用的卡牌离场事件派发逻辑，检测到卡牌离开牌桌时，先触发全局的leaveBoard通用事件，再根据卡牌的ciid触发对应专属事件
• 业务侧按需监听对应ciid的专属离场事件，实现自定义业务逻辑

代码实现示例（原生JS版本） #

事件派发逻辑 #

// 通用卡牌离场处理函数，传入离场卡牌的ciid
function dispatchCardLeaveEvent(ciid) {
  // 触发通用leaveBoard事件，携带ciid参数供全局监听使用
  const generalEvent = new CustomEvent('leaveBoard', {
    detail: { ciid: ciid }
  })
  document.dispatchEvent(generalEvent)

  // 触发对应ciid的专属离场事件
  const specificEvent = new CustomEvent(`leave${ciid}`, {
    detail: { ciid: ciid }
  })
  document.dispatchEvent(specificEvent)
}

// 卡牌离场判定触发逻辑，替换为你自己项目里的判定规则
if (/* 检测到ciid=137的卡牌满足离开牌桌的条件 */) {
  dispatchCardLeaveEvent(137)
}

事件监听逻辑 #

// 监听所有卡牌的离场事件
document.addEventListener('leaveBoard', (e) => {
  console.log('有卡牌离场，ciid为：', e.detail.ciid)
})

// 仅监听ciid=137的卡牌离场事件
document.addEventListener('leave137', (e) => {
  console.log('ciid=137的卡牌已离开牌桌')
  // 此处写入对应业务处理逻辑
})

如果你使用Vue、React等前端框架，可直接替换为框架内置的事件总线方案实现，核心逻辑和上述原生实现保持一致即可。

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