Как я могу обнаружить клик вне моего элемента? Я использую Vue.js, поэтому он будет находиться за пределами моего шаблона. Я знаю, как это сделать в Vanilla JS, но я не уверен, есть ли более правильный способ сделать это, когда я использую Vue.js?
Это решение для Vanilla JS: событие Javascript Detect Click за пределами div
Думаю, я могу использовать лучший способ доступа к элементу?
Можно легко решить, настроив индивидуальную директиву один раз:
Vue.directive('click-outside', {
bind () {
this.event = event => this.vm.$emit(this.expression, event)
this.el.addEventListener('click', this.stopProp)
document.body.addEventListener('click', this.event)
},
unbind() {
this.el.removeEventListener('click', this.stopProp)
document.body.removeEventListener('click', this.event)
},
stopProp(event) { event.stopPropagation() }
})
Применение:
<div v-click-outside="nameOfCustomEventToCall">
Some content
</div>
В компоненте:
events: {
nameOfCustomEventToCall: function (event) {
// do something - probably hide the dropdown menu / modal etc.
}
}
Рабочая демонстрация на JSFiddle с дополнительной информацией о предостережениях:
Существует решение, которое я использовал, который основан на ответе Линус Борг и отлично работает с 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 childrens
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)
},
});
Существует небольшая демонстрация
Вы можете найти дополнительную информацию о настраиваемых директивах и о том , что означает el, binding, vnode в https://vuejs.org/v2/guide/custom-directive.html#Directive-Hook-Arguments
Для этой задачи в сообществе доступны два пакета (оба поддерживаются):
Добавьте атрибут 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>
export default {
bind: function (el, binding, vNode) {
// Provided expression must evaluate to a function.
if (typeof binding.value !== 'function') {
const compName = vNode.context.name
let warn = '[Vue-click-outside:] provided expression '${binding.expression}' is not a function, but has to be'
if (compName) { warn += 'Found in component '${compName}'' }
console.warn(warn)
}
// Define Handler and cache it on the element
const bubble = binding.modifiers.bubble
const handler = (e) => {
if (bubble || (!el.contains(e.target) && el !== e.target)) {
binding.value(e)
}
}
el.__vueClickOutside__ = handler
// add Event Listeners
document.addEventListener('click', handler)
},
unbind: function (el, binding) {
// Remove Event Listeners
document.removeEventListener('click', el.__vueClickOutside__)
el.__vueClickOutside__ = null
}
}
Это работало для меня с Vue.js 2.5.2:
/**
* Call a function when a click is detected outside of the
* current DOM node ( AND its children )
*
* Example :
*
* <template>
* <div v-click-outside="onClickOutside">Hello</div>
* </template>
*
* <script>
* import clickOutside from '../../../../directives/clickOutside'
* export default {
* directives: {
* clickOutside
* },
* data () {
* return {
showDatePicker: false
* }
* },
* methods: {
* onClickOutside (event) {
* this.showDatePicker = false
* }
* }
* }
* </script>
*/
export default {
bind: function (el, binding, vNode) {
el.__vueClickOutside__ = event => {
if (!el.contains(event.target)) {
// call method provided in v-click-outside value
vNode.context[binding.expression](event)
event.stopPropagation()
}
}
document.body.addEventListener('click', el.__vueClickOutside__)
},
unbind: function (el, binding, vNode) {
// Remove Event Listeners
document.removeEventListener('click', el.__vueClickOutside__)
el.__vueClickOutside__ = null
}
}
Я объединил все ответы (включая строку из vue-clickaway) и придумал решение, которое работает для меня:
Vue.directive('click-outside', {
bind(el, binding, vnode) {
var vm = vnode.context;
var callback = binding.value;
el.clickOutsideEvent = function (event) {
if (!(el == event.target || el.contains(event.target))) {
return callback.call(vm, event);
}
};
document.body.addEventListener('click', el.clickOutsideEvent);
},
unbind(el) {
document.body.removeEventListener('click', el.clickOutsideEvent);
}
});
Использование в компоненте:
<li v-click-outside="closeSearch">
<!-- your component here -->
</li>
Я использую этот код:
кнопка скрытия
<a @click.stop="visualSwitch()"> show hide </a>
показать-скрыть элемент
<div class="dialog-popup" v-if="visualState" @click.stop=""></div>
скрипт
data () { return {
visualState: false,
}},
methods: {
visualSwitch() {
this.visualState = !this.visualState;
if (this.visualState)
document.addEventListener('click', this.visualState);
else
document.removeEventListener('click', this.visualState);
},
},
Обновление: удалить часы; добавить остановку распространения
Вы можете зарегистрировать двух прослушивателей событий для события click, как это
document.getElementById("some-area")
.addEventListener("click", function(e){
alert("You clicked on the area!");
e.stopPropagation();// this will stop propagation of this event to upper level
}
);
document.body.addEventListener("click",
function(e) {
alert("You clicked outside the area!");
}
);
Я обновил решение MadisonTrash для поддержки Mobile Safari (у которого нет события click, touchend нужно использовать touchend). Это также включает проверку, чтобы событие не вызывалось перетаскиванием на мобильные устройства.
Vue.directive('click-outside', {
bind: function (el, binding, vnode) {
el.eventSetDrag = function () {
el.setAttribute('data-dragging', 'yes');
}
el.eventClearDrag = function () {
el.removeAttribute('data-dragging');
}
el.eventOnClick = function (event) {
var dragging = el.getAttribute('data-dragging');
// Check that the click was outside the el and its children, and wasn't a drag
if (!(el == event.target || el.contains(event.target)) && !dragging) {
// call method provided in attribute value
vnode.context[binding.expression](event);
}
};
document.addEventListener('touchstart', el.eventClearDrag);
document.addEventListener('touchmove', el.eventSetDrag);
document.addEventListener('click', el.eventOnClick);
document.addEventListener('touchend', el.eventOnClick);
}, unbind: function (el) {
document.removeEventListener('touchstart', el.eventClearDrag);
document.removeEventListener('touchmove', el.eventSetDrag);
document.removeEventListener('click', el.eventOnClick);
document.removeEventListener('touchend', el.eventOnClick);
el.removeAttribute('data-dragging');
},
});
Просто, если кто-то смотрит, как скрыть модальность при нажатии вне модального. Поскольку модальный обычно имеет свою оболочку с классом modal-wrap или все, что вы назвали, вы можете поместить в обертку @click="closeModal". Используя обработку событий, указанную в документации vuejs, вы можете проверить, находится ли цель с кликом либо на обертке, либо на модальном.
methods: {
closeModal(e) {
this.event = function(event) {
if (event.target.className == 'modal-wrap') {
// close modal here
this.$store.commit("catalog/hideModal");
document.body.removeEventListener("click", this.event);
}
}.bind(this);
document.body.addEventListener("click", this.event);
},
}<div class="modal-wrap" @click="closeModal">
<div class="modal">
...
</div>
<div>@Denis Danilenko solutions работает для меня, вот что я сделал: кстати, я использую VueJS CLI3 и NuxtJS здесь и с Bootstrap4, но он также будет работать на VueJS без NuxtJS:
<div
class="dropdown ml-auto"
:class="showDropdown ? null : 'show'">
<a
href="#"
class="nav-link"
role="button"
id="dropdownMenuLink"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
@click="showDropdown = !showDropdown"
@blur="unfocused">
<i class="fas fa-bars"></i>
</a>
<div
class="dropdown-menu dropdown-menu-right"
aria-labelledby="dropdownMenuLink"
:class="showDropdown ? null : 'show'">
<nuxt-link class="dropdown-item" to="/contact">Contact</nuxt-link>
<nuxt-link class="dropdown-item" to="/faq">FAQ</nuxt-link>
</div>
</div>
export default {
data() {
return {
showDropdown: true
}
},
methods: {
unfocused() {
this.showDropdown = !this.showDropdown;
}
}
}
Вы можете создать собственное событие в формате javascript из директивы. Создайте директиву, которая отправляет событие с узла, используя node.dispatchEvent
let handleOutsideClick;
Vue.directive('out-click', {
bind (el, binding, vnode) {
handleOutsideClick = (e) => {
e.stopPropagation()
const handler = binding.value
if (el.contains(e.target)) {
el.dispatchEvent(new Event('out-click')) <-- HERE
}
}
document.addEventListener('click', handleOutsideClick)
document.addEventListener('touchstart', handleOutsideClick)
},
unbind () {
document.removeEventListener('click', handleOutsideClick)
document.removeEventListener('touchstart', handleOutsideClick)
}
})
Который может быть использован как это
h3( v-out-click @click="$emit('show')" @out-click="$emit('hide')" )
Я создаю div в конце тела следующим образом:
<div v-if="isPopup" class="outside" v-on:click="away()"></div>
Где .outside это:
.outside {
width: 100vw;
height: 100vh;
position: fixed;
top: 0px;
left: 0px;
}
И away() - это метод в экземпляре Vue:
away() {
this.isPopup = false;
}
Легко, хорошо работает.
Если у вас есть компонент с несколькими элементами внутри корневого элемента, вы можете использовать это решение It just works ™ с логическим значением.
<template>
<div @click="clickInside"></div>
<template>
<script>
export default {
name: "MyComponent",
methods: {
clickInside() {
this.inside = true;
setTimeout(() => (this.inside = false), 0);
},
clickOutside() {
if (this.inside) return;
// handle outside state from here
}
},
created() {
this.__handlerRef__ = this.clickOutside.bind(this);
document.body.addEventListener("click", this.__handlerRef__);
},
destroyed() {
document.body.removeEventListener("click", this.__handlerRef__);
},
};
</script>
Он простой и надежный, в настоящее время используется многими другими пакетами. Вы также можете уменьшить размер своего пакета javascript, вызывая пакет только в необходимых компонентах (см. Пример ниже).
npm install vue-click-outside
<template>
<div>
<div v-click-outside="hide" @click="toggle">Toggle</div>
<div v-show="opened">Popup item</div>
</div>
</template>
<script>
import ClickOutside from 'vue-click-outside'
export default {
data () {
return {
opened: false
}
},
methods: {
toggle () {
this.opened = true
},
hide () {
this.opened = false
}
},
mounted () {
// prevent click outside event with popupItem.
this.popupItem = this.$el
},
// do not forget this section
directives: {
ClickOutside
}
}
</script>
<button
class="dropdown"
@click.prevent="toggle"
ref="toggle"
:class="{'is-active': isActiveEl}"
>
Click me
</button>
data() {
return {
isActiveEl: false
}
},
created() {
window.addEventListener('click', this.close);
},
beforeDestroy() {
window.removeEventListener('click', this.close);
},
methods: {
toggle: function() {
this.isActiveEl = !this.isActiveEl;
},
close(e) {
if (!this.$refs.toggle.contains(e.target)) {
this.isActiveEl = false;
}
},
},
На этот вопрос уже есть много ответов, и большинство из них основаны на сходной идее пользовательской директивы. Проблема этого подхода заключается в том, что необходимо передать функцию-метод в директиву и не может напрямую писать код, как в других событиях.
Я создал новый пакет vue-on-clickout, который отличается. Проверьте это по адресу:
Это позволяет писать v-on:clickout так же, как и любые другие события. Например, вы можете написать
<div v-on:clickout="myField=value" v-on:click="myField=otherValue">...</div>
и это работает.
Я ненавижу дополнительные функции, так что... вот отличное решение vue без дополнительных методов vue, только var
<p @click="popup = !popup" v-out="popup">
<div v-if="popup">
My awesome popup
</div>
data:{
popup: false,
}
Vue.directive('out', {
bind: function (el, binding, vNode) {
const handler = (e) => {
if (!el.contains(e.target) && el !== e.target) {
//and here is you toggle var. thats it
vNode.context[binding.expression] = false
}
}
el.out = handler
document.addEventListener('click', handler)
},
unbind: function (el, binding) {
document.removeEventListener('click', el.out)
el.out = null
}
})
часто люди хотят знать, покидает ли пользователь корневой компонент (работает с любыми компонентами уровня)
Vue({
data: {},
methods: {
unfocused : function() {
alert('good bye');
}
}
})<template>
<div tabindex="1" @blur="unfocused">Content inside</div>
</template>У меня есть решение для обработки выпадающего меню переключения:
export default {
data() {
return {
dropdownOpen: false,
}
},
methods: {
showDropdown() {
console.log('clicked...')
this.dropdownOpen = !this.dropdownOpen
// this will control show or hide the menu
$(document).one('click.status', (e)=> {
this.dropdownOpen = false
})
},
}
Я использую этот пакет: https://www.npmjs.com/package/vue-click-outside
Он отлично работает для меня
HTML:
<div class="__card-content" v-click-outside="hide" v-if="cardContentVisible">
<div class="card-header">
<input class="subject-input" placeholder="Subject" name=""/>
</div>
<div class="card-body">
<textarea class="conversation-textarea" placeholder="Start a conversation"></textarea>
</div>
</div>
Мои скриптовые коды:
import ClickOutside from 'vue-click-outside'
export default
{
data(){
return {
cardContentVisible:false
}
},
created()
{
},
methods:
{
openCardContent()
{
this.cardContentVisible = true;
}, hide () {
this.cardContentVisible = false
}
},
directives: {
ClickOutside
}
}