目录

🏆 阻止点击的默认事件

🏆倒计时结束才能被再次点击,引入一个flag作为信号量

🏆排他事件

🏆 阻止点击的默认事件

  code.addEventListener('click', function (e) {

      e.preventDefault()

})

注意:

1. e.preventDefault()是方法,要加小括号(我经常忘记)

2. e.preventDefault()不是让按钮或者触发的事件对象不能被点击,

而是阻止点击后,被点击者若果有什么行为将会被阻止,

比如a标签点击后会跳转,使用阻止默认事件后,将不会跳转

🏆倒计时结束才能被再次点击,引入一个flag作为信号量

注意如果不这样做会出现:

1.可以一直点击,然后,计时器会多个叠加,倒计时变得很快

2.倒计时没有结束就可以重新点击,在真实情况中会重复发送多个验证码

所以我们引入一个flag作为信号量,形成一个开关事件

1.在点击事件前先把门打开(flag=true)

2.点击事件发生时我们判断是否flag为true:if(flag)

在进门后(flag为true并且点击事件发生)先把门关闭(flag=false)

3.在点击事件结束后(i===0)把门打开(flag=true),以供下次点击 

const code = document.querySelector('.code')
    // 🏆在被点击后倒计时结束才能被再次点击,引入一个flag作为信号量
    let flag = true
    code.addEventListener('click', function (e) {
      if (flag) {
        flag = false
        // 🏆阻止点击的默认事件
        e.preventDefault()
        let i = 5
        code.innerHTML = `0${i}秒后重新获取`
        let id = setInterval(function () {
          i--
          code.innerHTML = `0${i}秒后重新获取`
          if (i === 0) {
            code.innerHTML = '重新获取'
            clearInterval(id)
            flag = true
          }
        }, 1000)
      }
    })

🏆排他事件

(有一堆盒子,选中一个盒子添加效果,其他盒子没有效果,,再次选择另一个盒子,原来选中的盒子效果消失,效果到新的盒子身上)

    const img = document.querySelectorAll('.small img')
    for (let i = 0; i < img.length; i++) {
      img[i].addEventListener('mouseenter', function () {
        // 1.4 将 小盒子里面 1i 标签身上带有 active 类名的元素找出来 移除
        document.querySelector('.small li.active').classList.remove("active")
        // 1.3 给经过的当前元素的父元素设置 active 类名
        img[i].parentNode.classList.add('active')
      })
    }

1.首先是给选中的元素增加类名:对象.classList.add('active')

2.是在给新元素增加类名之前要把有active的类名的元素移除类名,

在之前我们使用for循环先把所有的元素的类名去掉,然后给自己加上,这是一种排他思想

这里是直接找到前一个有active类名的元素移除类名,然后移除,在给自己加类名