jQuery动态添加事件目标CSS类方法

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《jQuery 动态添加事件目标 CSS 类方法》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

本文详解如何在 jQuery 中通过 `touchend`/`mouseup` 事件精准识别被触达的目标元素，并使用 `hasClass()` 和 `addClass()` 动态添加样式类，避免误操作和逻辑失效。

在实现拖拽交互（尤其是移动端如 iPad）时，一个常见误区是：在事件处理器中直接对全局选择器（如 $(".year2")）进行判断和操作，而未考虑事件实际触发的具体 DOM 元素。原代码中：

if ($(".year").hasClass("year2")) { ... }

该写法检查的是页面中任意一个 .year 元素是否含有 year2 类（且仅返回首个匹配项），而非判断当前被触摸/点击的元素是否为 .year2——这导致逻辑完全脱离用户真实交互目标，必然失效。

✅ 正确做法是：从事件对象 e.target 出发，获取实际被触发的 DOM 元素，并用 jQuery 封装后进行精确判断。推荐统一监听 mouseup touchend 双事件，兼顾桌面与触屏设备：

$('.draggable').on('mouseup touchend', function(e) {
  e.preventDefault(); // 阻止默认行为（如文本选中、滚动等）

  const $target = $(e.target); // 获取被触发的 jQuery 对象

  // 判断目标是否为指定年份容器（支持多个类名一次性匹配）
  if ($target.is('.year2, .year58')) {
    $target.addClass('dropped'); // 仅对该目标添加类
  }
});

? $(e.target).is(selector) 是关键：它高效判断当前目标是否匹配给定选择器，语义清晰、性能优于多次 hasClass() 嵌套判断，也天然规避了“查全局却改局部”的逻辑错位。

同时，建议为 .dropped 类定义明确样式以便可视化验证效果：

.dropped {
  background-color: #ffeb3b; /* 明亮黄色，便于调试 */
  transition: background-color 0.2s ease;
}

? 注意事项：

• ❌ 避免在事件中使用 $(".year2").addClass(...) —— 它会批量作用于所有匹配元素，而非用户所点的那个；
• ✅ 始终基于 e.target 或 e.currentTarget（需注意委托场景差异）做操作；
• ⚠️ 若 .year 子元素内含嵌套标签（如 或 ），e.target 可能是其子节点。此时可使用 closest() 向上查找最近的 .year 容器：

  const $year = $(e.target).closest('.year');
  if ($year.length && $year.is('.year2, .year58')) {
    $year.addClass('dropped');
  }

• ? 移动端 touchend 触发后可能伴随模拟 click，若后续有其他 click 事件，建议统一用 e.preventDefault() 或合理节流，防止重复响应。

掌握以事件目标为中心的 DOM 操作思维，是编写健壮、可维护交互逻辑的基础。

到这里，我们也就讲完了《jQuery动态添加事件目标CSS类方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！