Öğenin dışındaki tıklamayı algıla

Öğemin dışındaki bir tıklamayı nasıl tespit edebilirim? Vue.js kullanıyorum, böylece şablon öğemin dışında olacak. Bunu Vanilla JS'de nasıl yapacağımı biliyorum, ancak Vue.js kullanırken bunu yapmanın daha uygun bir yolu olup olmadığından emin değilim?

Vanilla JS için çözüm budur: div dışındaki Javascript Detect Click olayı

Öğeye erişmek için daha iyi bir yol kullanabilirim sanırım?

Bir kez özel bir yönerge oluşturarak güzelce çözülebilir:

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() }
})

Kullanımı:

<div v-click-outside="nameOfCustomEventToCall">
  Some content
</div>

Bileşende:

events: {
  nameOfCustomEventToCall: function (event) {
    // do something - probably hide the dropdown menu / modal etc.
  }
}

JSFiddle üzerinde uyarılar hakkında ek bilgi içeren Çalışma Demosu:

https://jsfiddle.net/Linusborg/yzm8t8jq/

Linus Borg cevabına dayanan ve vue.js 2.0 ile iyi çalışan benim kullandığım çözüm var.

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)
  },
});

Şunları kullanarak bağlanırsınız v-click-outside:

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

İşte küçük bir demo

Https://vuejs.org/v2/guide/custom-directive.html#Directive-Hook-Arguments adresinde özel yönergeler ve diğer , bağlama, vnode'un ne anlama geldiğiyle ilgili daha fazla bilgi bulabilirsiniz.

tabindexOdaklanabilmesi için bileşeninize nitelik ekleyin ve aşağıdakileri yapın:

<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>

Toplulukta bu görev için kullanılabilen iki paket vardır (her ikisi de korunur):

• https://github.com/simplesmiler/vue-clickaway
• https://github.com/ndelvalle/v-click-outside

Bu, Vue.js 2.5.2 ile benim için çalıştı:

/**
 * 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
  }
}

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

  }
}

Tüm cevapları birleştirdim (vue-clickaway'den bir satır dahil) ve benim için çalışan bu çözümü buldum:

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);
    }
});

Bileşende kullanın:

<li v-click-outside="closeSearch">
  <!-- your component here -->
</li>

Mobil Safari'yi desteklemek için MadisonTrash'ın yanıtını güncelledim ( clicketkinliği olmayan, touchendbunun yerine kullanılmalıdır). Bu ayrıca, etkinliğin mobil cihazlarda sürüklenerek tetiklenmemesi için bir kontrol içerir.

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');
    },
});

Bu kodu kullanıyorum:

göster-gizle düğmesi

 <a @click.stop="visualSwitch()"> show hide </a>

göster-gizle öğesi

<div class="dialog-popup" v-if="visualState" @click.stop=""></div>

senaryo

data () { return {
    visualState: false,
}},
methods: {
    visualSwitch() {
        this.visualState = !this.visualState;
        if (this.visualState)
            document.addEventListener('click', this.visualState);
        else
            document.removeEventListener('click', this.visualState);
    },
},

Güncelleme: saati kaldır; durdurma yayılımı ekle

Ek işlevlerden nefret ediyorum, bu yüzden ... işte ek vue yöntemleri olmadan harika bir vue çözümü, sadece var

1. html öğesi oluştur, denetimleri ve yönergeyi ayarla

    <p @click="popup = !popup" v-out="popup">

    <div v-if="popup">
       My awesome popup
    </div>

2. gibi verilerde bir değişken oluştur

data:{
   popup: false,
}

3. vue yönergesi ekleyin. onun

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
    }
})

Özellikle öğenin dışında, ancak yine de üst öğenin içinde bir tıklama arıyorsanız,

<div class="parent" @click.self="onParentClick">
  <div class="child"></div>
</div>

Bunu kipler için kullanıyorum.

Bunun gibi tıklama etkinliği için iki olay dinleyicisi kaydedebilirsiniz

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!");
         }
);

  <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;
      }
    },
  },

Kısa cevap: Bu, Özel Direktiflerle yapılmalıdır .

Burada bunu da söyleyen birçok harika yanıt var, ancak dış tıklamayı yoğun bir şekilde kullanmaya başladığınızda (özellikle katmanlı veya birden çok dışlama ile) gördüğüm yanıtların çoğu bozulur. Özel Direktiflerin nüanslarından ve özellikle de bunun uygulanmasından bahseden ortam üzerine bir makale yazdım . Tüm uç durumları kapsamayabilir, ancak düşündüğüm her şeyi kapsamıştır.

Bu, birden çok bağlamayı, diğer öğe dışlamalarının birden çok düzeyini hesaba katacak ve işleyicinizin yalnızca "iş mantığını" yönetmesine izin verecektir.

İşte kodun en azından tanım kısmı için, tam açıklama için makaleye göz atın.

var handleOutsideClick={}
const OutsideClick = {
  // this directive is run on the bind and unbind hooks
  bind (el, binding, vnode) {
    // Define the function to be called on click, filter the excludes and call the handler
    handleOutsideClick[el.id] = e => {
      e.stopPropagation()
      // extract the handler and exclude from the binding value
      const { handler, exclude } = binding.value
      // set variable to keep track of if the clicked element is in the exclude list
      let clickedOnExcludedEl = false
      // if the target element has no classes, it won't be in the exclude list skip the check
      if (e.target._prevClass !== undefined) {
        // for each exclude name check if it matches any of the target element's classes
        for (const className of exclude) {
          clickedOnExcludedEl = e.target._prevClass.includes(className)
          if (clickedOnExcludedEl) {
            break // once we have found one match, stop looking
          }
        }
      }
      // don't call the handler if our directive element contains the target element
      // or if the element was in the exclude list
      if (!(el.contains(e.target) || clickedOnExcludedEl)) {
        handler()
      }
    }
    // Register our outsideClick handler on the click/touchstart listeners
    document.addEventListener('click', handleOutsideClick[el.id])
    document.addEventListener('touchstart', handleOutsideClick[el.id])
    document.onkeydown = e => {
      //this is an option but may not work right with multiple handlers
      if (e.keyCode === 27) {
        // TODO: there are minor issues when escape is clicked right after open keeping the old target
        handleOutsideClick[el.id](e)
      }
    }
  },
  unbind () {
    // If the element that has v-outside-click is removed, unbind it from listeners
    document.removeEventListener('click', handleOutsideClick[el.id])
    document.removeEventListener('touchstart', handleOutsideClick[el.id])
    document.onkeydown = null //Note that this may not work with multiple listeners
  }
}
export default OutsideClick

Created () içindeki bir işlevi kullanarak biraz farklı bir şekilde yaptım.

  created() {
      window.addEventListener('click', (e) => {
        if (!this.$el.contains(e.target)){
          this.showMobileNav = false
        }
      })
  },

Bu şekilde, birisi öğenin dışına tıklarsa benim durumumda mobil gezinme gizlenir.

Bu yardımcı olur umarım!

Bu sorunun zaten pek çok cevabı var ve bunların çoğu benzer özel yönerge fikrine dayanıyor. Bu yaklaşımla ilgili sorun, bir kişinin yönergeye bir yöntem işlevini iletmek zorunda olması ve diğer olaylarda olduğu gibi doğrudan kod yazamamasıdır.

vue-on-clickoutFarklı olan yeni bir paket oluşturdum . Şuraya göz atın:

• https://github.com/MuTsunTsai/vue-on-clickout

Birinin v-on:clickouttıpkı diğer olaylar gibi yazmasına izin verir . Örneğin yazabilirsin

<div v-on:clickout="myField=value" v-on:click="myField=otherValue">...</div>

ve çalışıyor.

Güncelleme

vue-on-clickout artık Vue 3'ü destekliyor!

Sadece herhangi biri modalin dışına tıklandığında modun nasıl gizleneceğini arıyorsa. Modal genellikle sınıfına modal-wrapveya sizin adlandırdığınız herhangi bir şeye sahip sarmalayıcıya sahip olduğundan, sarmalayıcıya koyabilirsiniz @click="closeModal". Vuejs belgelerinde belirtilen olay işlemeyi kullanarak , tıklanan hedefin sarmalayıcıda mı yoksa modelde mi olduğunu kontrol edebilirsiniz.

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 çözümleri benim için çalışıyor, işte yaptığım şey: Bu arada VueJS CLI3 ve NuxtJS'yi burada ve Bootstrap4 ile kullanıyorum, ancak NuxtJS olmadan VueJS'de de çalışacak:

<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;
    }
  }
}

Bir yönergeden özel yerel javascript olayını yayınlayabilirsiniz. Node.dispatchEvent kullanarak düğümden bir olay gönderen bir yönerge oluşturun

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)
    }
})

Bunun gibi kullanılabilir

h3( v-out-click @click="$emit('show')" @out-click="$emit('hide')" )

Vücudun sonunda şöyle bir div oluşturuyorum:

<div v-if="isPopup" class="outside" v-on:click="away()"></div>

.Outside nerede:

.outside {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
}

Ve away (), Vue örneğindeki bir yöntemdir:

away() {
 this.isPopup = false;
}

Kolay, iyi çalışıyor.

Kök öğenin içinde birden fazla öğeye sahip bir bileşeniniz varsa, bu It just works ™ çözümünü bir boole ile kullanabilirsiniz.

<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>

Bu paketi kullan vue-click-dışında kullan

Basit ve güvenilirdir, şu anda diğer birçok paket tarafından kullanılmaktadır. Ayrıca, paketi yalnızca gerekli bileşenlerde çağırarak javascript paketinizin boyutunu da azaltabilirsiniz (aşağıdaki örneğe bakın).

npm install vue-click-outside

Kullanım:

<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>

Tekerleği yeniden icat etmeyin, bu paketi v-click-out kullanın

Dış tıklamayı işleyen yeni bileşen oluşturabilirsiniz.

Vue.component('click-outside', {
  created: function () {
    document.body.addEventListener('click', (e) => {
       if (!this.$el.contains(e.target)) {
            this.$emit('clickOutside');
           
        })
  },
  template: `
    <template>
        <div>
            <slot/>
        </div>
    </template>
`
})

Ve bu bileşeni kullanın:

<template>
    <click-outside @clickOutside="console.log('Click outside Worked!')">
      <div> Your code...</div>
    </click-outside>
</template>

sık sık insanlar kullanıcının kök bileşenini terk edip etmediğini bilmek ister (herhangi bir seviye bileşeniyle çalışır)

Vue({
  data: {},
  methods: {
    unfocused : function() {
      alert('good bye');
    }
  }
})

<template>
  <div tabindex="1" @blur="unfocused">Content inside</div>
</template>

Açılır menüyü kullanmak için bir çözümüm var:

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
        })
      },
}

Bu paketi kullanıyorum: https://www.npmjs.com/package/vue-click-outside

Benim için iyi çalışıyor

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>

Komut dosyası kodlarım:

import ClickOutside from 'vue-click-outside'
export default
{
    data(){
        return {
            cardContentVisible:false
        }
    },
    created()
    {
    },
    methods:
        {
            openCardContent()
            {
                this.cardContentVisible = true;
            }, hide () {
            this.cardContentVisible = false
                }
        },
    directives: {
            ClickOutside
    }
}