jq解绑元素

此心安处便是吾乡

已于 2023-04-07 00:06:38 修改

阅读量99

点赞数

文章标签： javascript vue.js 前端

于 2023-04-07 00:05:27 首次发布

本文链接：https://blog.csdn.net/weixin_44967971/article/details/130002319

版权

该代码示例展示了如何使用JavaScript和jQuery解除通过ID、class和data-click属性绑定的点击事件。它遍历li元素，检查元素的ID、class和data-click属性，然后解除对应的事件绑定并移除相关属性。

摘要由CSDN通过智能技术生成

import $ from "./jquery.js";

// 需要存放的 data-click 数组

const deleteClickAttribute = [
  "click1",
  "click2",
  "click3",
  "click4",
  "click5",
  "click6",
  "click7",
  "click8",
  "click8",
];

// 通过ID绑定的数组
const deleteClickIds = ["id1", "id3", "id2"];
//通过class绑定的数组
const deleteClickClasss = ["class1", "class2"];
const liEles = document.getElementsByTagName("li");
// 模拟添加事件
let el = document.getElementById("id1");
$("#id1").on("click", () => {
  console.log(123);
});
el.onclick = () => {
  console.log(123);
};
const unbind = ({ byAttributes, byIds, byClasss, unbindEles }) => {
  // isOutermostlayer 是否为最外层
  function recurrence(unbindEles, isOutermostlayer) {
    let needReturn = false;
    for (const el of unbindEles) {
      if (needReturn) {
        return;
      }
      //  判断id 是否存在于id数组
      if (byIds.includes(el.id)) {
        $(el).unbind("click");
        $(el).removeAttr("click");
        el.onclick = null;
        //  最外层中断循环 里层中断递归且中断循环
        if (isOutermostlayer) {
          continue;
        }
        needReturn = true;
        continue;
      }
      const classList = el.classList;
      if (classList.length) {
        const mixedClass = byClasss.find((classItem) =>
          classList.contains(classItem)
        );
        if (mixedClass) {
          $(el).unbind("click");
          $(el).removeAttr("click");
          el.onclick = null;
          //  最外层中断循环 里层中断递归且中断循环
          if (isOutermostlayer) {
            continue;
          }
          needReturn = true;
          continue;
        }
      }
      const dataClick = el.getAttribute("data-click");
      if (byAttributes.includes(dataClick)) {
        $(el).unbind("click");
        $(el).removeAttr("click");
        el.onclick = null;
        //  最外层中断循环 里层中断递归且中断循环
        if (isOutermostlayer) {
          continue;
        }
        needReturn = true;
        continue;
      }
      if (el.children.length > 0) {
        recurrence(el.children);
      }
    }
  }
    recurrence(unbindEles, true);
};
unbind({
  byAttributes: deleteClickAttribute,
  byIds: deleteClickIds,
  byClasss: deleteClickClasss,
  unbindEles: liEles,
});