时间戳

首页 > 解决方案 > 将 onselectionchange 添加到 vue

javascript - 将 onselectionchange 添加到 vue

问题描述

我正在尝试实现一个文本选择侦听器来显示一些自定义选项的工具栏

<script>

export default {
  name: "home",
  created() {
    document.onselectionchange = function() {
      this.showMenu();
    };
  },
  data() {
    return {
      ...
    };
  },
  methods: {
    showMenu() {
      console.log("show menu");
      }
    }

</script>

<style scoped>
</style>

但它仍然显示无法调用未定义的showMenu，所以我尝试了这种方式：

  created() {
    vm = this;
    document.onselectionchange = function() {
      vm.showMenu();
    };
  },

所以，什么都没有改变=（

我需要使用这个 selectionchange，因为它是我可以添加的唯一监听器，它将同时处理桌面和移动设备，其他方法我应该实现 touchup、touchdown 并且它不适用于设备

标签： javascriptvue.js

解决方案

以经典方式声明的函数确实有自己的this. 您可以通过使用显式绑定或使用 ES6 箭头函数（它没有自己的，保留外部的）来解决this这个Function.prototype.bind()问题this。

第二个问题是，如果您有多个已显示的组件，如果您使用 assignment 附加它，每个组件都会重新分配（并因此覆盖）侦听器document.onselectionchange =。这将导致只有最后一个选择元素按预期工作，因为它是最后一个分配的元素。

为了解决这个问题，我建议你addEventListener()改用：

document.addEventListener('selectionchange', function() {
  this.showMenu();
}.bind(this));

或者

document.addEventListener('selectionchange', () => {
  this.showMenu();
});

第三种解决方案存储对闭包的引用this并在闭包中使用它：

const self = this;
document.addEventListener('selectionchange', function() {
  self.showMenu();
});

推荐阅读