时间戳

首页 > 解决方案 > 如何在 vuejs 中正确处理元素外的点击？

javascript - 如何在 vuejs 中正确处理元素外的点击？

问题描述

是否有任何适当的解决方案来处理元素外的点击？

有一些通用的解决方案，比如在没有 jquery 的情况下处理元素外部的点击：

window.onload = function() {

    // For clicks inside the element
    document.getElementById('myElement').onclick = function(e) {
            // Make sure the event doesn't bubble from your element
        if (e) { e.stopPropagation(); } 
        else { window.event.cancelBubble = true; }
            // Place the code for this element here
        alert('this was a click inside');
    };

    // For clicks elsewhere on the page
    document.onclick = function() {
        alert('this was a click outside');
    };
};

但问题是几乎所有项目在不同的组件中都有多个不同的弹出窗口，我应该处理它们的外部点击。

我应该如何在不使用全局 window.on 的情况下处理 click-outisde？（我认为不可能将所有组件放在 window.on 中的 case 处理程序之外）

标签： javascripthtmlvue.jsevent-handlingdom-events

解决方案

在为此苦苦挣扎并搜索后，我发现如何使用 vuejs 指令解决此问题而不会流血：

1.使用库：

v-click-outside是一个很好的，

https://www.npmjs.com/package/v-click-outside

2.没有图书馆：

```
//main.js
import '@/directives';
......

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

使用 v-click-outside 指令随处使用它，如下所示：

//header.vue
 <div class="profileQuickAction col-lg-4 col-md-12" v-click-outside="hidePopUps">
...
</>

你可以检查一下

推荐阅读