Question

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

<script>

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

</script>

<style scoped>
</style>

但是它仍然显示无法调用undefined的showMenu，因此我尝试了这种方式：

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

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

我需要使用此selectionchange，因为它是我可以添加的唯一可以同时处理台式机和移动设备的侦听器，其他方法我应该实现触摸，触摸和不适用于设备

Answer 1

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

第二个问题是，如果您显示的组件中有多个，则每个组件都会重新分配（并因此覆盖）监听器。您可以使用作业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();
});

将onselectionchange添加到vue

1 个答案: