检测单击外部元素

javascript vue.js

2022-08-30 01:46:08

如何检测元素外部的点击？我使用的是Vue.js所以它将在我的模板元素之外。我知道如何在Vanilla JS中做到这一点，但我不确定当我使用Vue时，是否有更合适的方法.js？

这是 Vanilla JS 的解决方案：Javascript 检测 div 外部的 Click 事件

我想我可以使用更好的方法来访问元素？

答案 1

有我使用的解决方案，它基于Linus Borg的答案，并且可以与vue.js 2.0一起使用。

Vue.directive('click-outside', {
  bind: function (el, binding, vnode) {
    el.clickOutsideEvent = function (event) {
      // here I check that click was outside the el and his children
      if (!(el == event.target || el.contains(event.target))) {
        // and if it did, call method provided in attribute value
        vnode.context[binding.expression](event);
      }
    };
    document.body.addEventListener('click', el.clickOutsideEvent)
  },
  unbind: function (el) {
    document.body.removeEventListener('click', el.clickOutsideEvent)
  },
});

您可以使用以下命令绑定到它：v-click-outside

<div v-click-outside="doStuff">

这是一个小演示

您可以找到有关自定义指令的更多信息，以及 el、绑定、vnode 在 https://v2.vuejs.org/v2/guide/custom-directive.html#Directive-Hook-Arguments

答案 2

向组件添加属性，以便可以聚焦该组件并执行以下操作：tabindex

<template>
    <div
        @focus="handleFocus"
        @focusout="handleFocusOut"
        tabindex="0"
    >
      SOME CONTENT HERE
    </div>
</template>

<script>
export default {    
    methods: {
        handleFocus() {
            // do something here
        },
        handleFocusOut() {
            // do something here
        }
    }
}
</script>