我有一个id ="content-area"的div,当用户点击这个div之外时,我想提醒他们他们点击它之外的事实.我如何使用JavaScript来解决这个问题？
<div id = "outer-container">
<div id = "content-area">
Display Conents
</div>
</div>
我正在寻找一种方法来关闭一个组件，当它在元素的外部单击时。
我尝试了一个addEventListener. 这会关闭组件，但在关闭后它不会再次打开。
window.addEventListener('click', function(e){
if (document.getElementById('shopcartpreview').contains(e.target)){
console.log("Clicked in Box");
} else{
console.log("Clicked outside Box");
$('#shopcartpreview').hide();
}
})
有没有办法做到这一点？
<template>
<div id="shopcartpreview" v-if="carthover">
<div class="cartitem" v-for="item in cartitems">
<div class="cartitempic"><img class="productImg" width="80px" height="80px" v-bind:src="'assets/products/' + item.image"></div>
<div class="cartitemdetails">
<div class="cartitemname">{{item.name}}</div>
<div class="cartitemqty">1 X </div>
<div class="cartitemprice">€{{item.unit_price}}</div>
</div>
<div class="cartitemdelete">
<img src="assets/images/icon-bin.png" width="15px" height="15px">
</div>
</div>
<div class="carttotal">
<div class="carttotaltext">TOTAL:</div>
<div class="carttotalprice">€2,860.00</div>
</div>
<div class="cartcheckouttbn">PROCEED TO CHECKOUT</div>
<div class="viewcart">VIEW CART</div>
</div>
</template>
<script>
module.exports = {
data: function () …基于这个问题检测点击外界因素而这个答案/sf/answers/2967248651/，我想该指令从Vue的2迁移到Vue公司3似乎binding.expression并vnode.context没有存在更多。我怎样才能让它工作？
app.directive('click-outside', {
beforeMount (el, binding, vnode) {
el.clickOutsideEvent = function (event) {
if (!(el === event.target || el.contains(event.target))) {
vnode.context[binding.expression](event);
}
};
document.body.addEventListener('click', el.clickOutsideEvent);
},
unmounted (el) {
document.body.removeEventListener('click', el.clickOutsideEvent);
}
});
我有一个HeaderSubmenu组件，如果单击一个按钮，它可以显示/隐藏下拉菜单。好的，但是现在我尝试找到一个好的解决方案，使用户单击应用程序中的任意位置而不单击此下拉菜单时，它就会隐藏。
我正在将Vue 2.3.3与Vuex和VueRouter一起使用。
我的应用程序入口点：
'use strict';
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
Vue.use(VueRouter);
Vue.use(Vuex);
import store_data from 'store';
import {router} from 'routes';
import App from 'app.vue';
var store = new Vuex.Store(store_data);
new Vue({
el: '#app',
store,
router: router,
render: function (createElement) {
return createElement(App)
}
})
HeaderSubmenu组件模板：
<template>
<li class="header-submenu">
<!-- button to show/hide the drop-down menu -->
<header-link v-bind="$props" :href="to ? false : '#'" @click.native="toggleMenu()">
<slot name="item"></slot>
</header-link>
<!-- drop-down menu --> …我正在使用Vue2.x，我想通过使用自定义指令添加事件监听器。但是在vue1.x中，我可以使用下面的代码片段：
Vue.directive('demo',{
bind () {
let self = this
this.event = function (event) {
self.vm.$emit(self.expression, event)
}
this.el.addEventListener('click', this.stopProp)
document.body.addEventListener('click', this.event)
}
})
但是在vue2.x中，我发现'this'始终是不确定的。而且我不知道如何获取vm（Vue Instance）对象。我已经尝试了文档中所有传递的参数列表。
有谁知道如何访问vm对象？