jQuery事件解绑

最新推荐文章于 2024-10-10 20:22:22 发布

听海边涛声

最新推荐文章于 2024-10-10 20:22:22 发布

阅读量506

点赞数 2

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/panghuangang/article/details/142027580

版权

语法：

jQuery元素对象.off(事件名称)

其中：参数事件名称如果省略不写，可以解绑jQuery对象上的所有事件。

示例：jQuery元素对象.off(事件名称)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
</head>

<body>
  <input type="button" id="btn1" value="测试事件的绑定">
  <input type="button" id="btn2" value="测试事件的解绑">

  <script>
    // 给id是btn1的按钮绑定事件
    $('#btn1').click(() => {
      alert('按钮被点击了')
    })

    $('#btn2').click(() => {
      $('#btn1').off('click')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击第一个按钮：
在这里插入图片描述

点击第二个按钮，解绑第一个按钮上的点击事件。然后再点击第一个按钮，没有弹出框，说明点击事件被解绑了。

示例：jQuery元素对象.off()

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
</head>

<body>
  <input type="button" id="btn1" value="测试事件的绑定">
  <input type="button" id="btn2" value="测试事件的解绑">

  <script>
    // 给id是btn1的按钮绑定事件
    $('#btn1').click(() => {
      alert('按钮被点击了')
    })

    $('#btn2').click(() => {
      $('#btn1').off()
    })
  </script>
</body>

</html>