何喜阳博客

jQuery和vue混用时点击等dom事件失效问题解决思路

jQuery 和 vue 等混用时点击等 dom 事件会失效,这是因为 vue 是虚拟 dom,在初始化、数据变化时会重新渲染,此时原有事件会全部丢失,导致 jquery 绑定的事件不是最终的 dom。

比如以下示例代码:

<!-- 示例代码 -->
<script src="//unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <button id="test">测试</button>
</div>
<script>
  const t1 = document.getElementById('test')
  const t2 = document.getElementById('test')
  console.log(t1 === t2) //true

  new Vue({
    el: '#app',
    mounted() {
      const t3 = document.getElementById('test')
      console.log(t3 === t2) //false
    },
  })
</script>

在 script 脚本刚执行的时候,读取 2 次#test,他们是相同的一个,而 vue 初始化完成以后再次获取#test,此时相比较就已经不是同一个了。由此也可以发现,即便他们的 ID 相同,也并非相同的 DOM,在 Vue 初始化之前绑定的事件自然也就会失效。

推荐把 jQuery 的代码改写成 Vue 的事件绑定,也比较利于后续维护,但如果由于某些原因确实需要 jQuery 的代码和 Vue 的代码混用,有以下几种方式,请根据实际情况选择:

1.把需要 jQuery 操作的 DOM 移动到 Vue 作用域之外

这种办法需要修改 DOM 结构,适合弹层提示等相对独立的场景,比如我们刚才的示例代码有一段是 el:"#app",id 是 app 的 dom 就是 Vue 的作用域,把需要 jQuery 操作的 DOM 移动到#app 外层,就不会受到 Vue 的影响。但采用此方法的时候,要注意 CSS 或其他操作是否依赖 DOM 结构。

2.在 Vue 渲染完成再执行事件监听

这也是网上教程比较常见的做法,不需要修改 DOM 结构,对代码的修改也相对较少。比如对整体的 jQuery 添加一个延迟,也可以放到 ready 函数中再监听代码,如以下示例代码。

$(document).ready(function () {
  $(function () {
    // 在这里开始写事件监听
  })
})

3.借助事件委托

事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件。具体原理、实现情况可以上网查阅,我这里只写一个修改示例,不需要修改 DOM 结构,对代码只需要针对性调整。

// 改写之前,这样在Vue中不能使用
$('#test').on('click', function (event) {})
// 改写成这样,这样在Vue中能使用
$('body').on('click', '#test', function (event) {})

以上就是全部内容了。如果你觉得内容有帮助,可以扫码打赏,请我吃一顿饭。

微信支付宝

当前页面地址:https://hexiyang.cn/article/1608043327.html

内容基于 《自由转载-非商用-非衍生-保持署名》 协议发布,允许非商用转载,需要保留作者姓名和当前页面链接。