JS Vue.js监听用户是否离开当前页

JS、Vue.js监听用户是否离开当前页面

当触发visibilitychange后，document.visibilityState会有两个值，第一个是hidden：表示当前页面不可见，第二个是visible：表示当前页面至少有一部分是可见的。通过if判定document.visibilityState的值来实现当用户离开页面时要实现的交互或者向后台发送数据。

mounted() {//如果再vue中将判定放置在mountdedocument.addEventListener('visibilitychange',function(e){console.log(document.visibilityState);let state = document.visibilityStateif(state == 'hidden'){console.log(document.visibilityState,'用户离开了');}if(state == 'visible'){console.log(document.visibilityState,'回来了');}});}

给window添加onblur和onfocus

visibilitychange监听用户是否离开当前页面存在一定的漏洞，当用户将另一个软件或者页面的窗口缩小，通过Alt-Tab切换时，因切换出的窗口小于用户所在页面的窗口，用户所在页面还有部分内容可以被用户看到，那么页面就会认为用户没有离开，但实际上用户已经离开了，所以需要再给window添加onblur和onfocus，onblur为当前页面失去焦点，onfocus为当前页面得到焦点，通过焦点来判断用户是否离开当前页面，当通过Alt-Tab切换时，焦点会自动转移到新窗口上，之前的页面就失去焦点，从而判定用户离开。

window.onblur = function () {console.log('失去焦点');}window.onfocus = function() {console.log('得到焦点');}

实际开发中最好将两种判定全部加上。

如果觉得《JS Vue.js监听用户是否离开当前页》对你有帮助，请点赞、收藏，并留下你的观点哦！