Mendeteksi klik di luar elemen

Bagaimana cara mendeteksi klik di luar elemen saya? Saya menggunakan Vue.js jadi itu akan berada di luar elemen template saya. Saya tahu cara melakukannya di Vanilla JS, tetapi saya tidak yakin apakah ada cara yang lebih tepat untuk melakukannya, saat saya menggunakan Vue.js?

Ini adalah solusi untuk Vanilla JS: Javascript Detect Click event di luar div

Saya kira saya dapat menggunakan cara yang lebih baik untuk mengakses elemen?

Dapat diselesaikan dengan baik dengan menyiapkan arahan khusus sekali:

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

Pemakaian:

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

Dalam komponen:

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

Bekerja Demo di JSFiddle dengan info tambahan tentang peringatan:

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

Ada solusi yang saya gunakan, yang didasarkan pada jawaban Linus Borg dan berfungsi dengan baik dengan 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)
  },
});

Anda mengikatnya menggunakan v-click-outside:

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

Ini demo kecilnya

Anda dapat menemukan beberapa info lebih lanjut tentang arahan khusus dan apa arti el, binding, vnode di https://vuejs.org/v2/guide/custom-directive.html#Directive-Hook-Arguments

Tambahkan tabindexatribut ke komponen Anda agar dapat difokuskan dan lakukan hal berikut:

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

Ada dua paket yang tersedia di komunitas untuk tugas ini (keduanya dipertahankan):

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

Ini Bekerja untuk saya dengan 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
  }
}

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

  }
}

Saya telah menggabungkan semua jawaban (termasuk baris dari vue-clickaway) dan menghasilkan solusi yang cocok untuk saya:

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

Gunakan dalam komponen:

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

Saya telah memperbarui jawaban MadisonTrash untuk mendukung Mobile Safari (yang tidak memiliki clickacara, touchendharus digunakan sebagai gantinya). Ini juga termasuk pemeriksaan sehingga acara tersebut tidak dipicu dengan menyeret di perangkat seluler.

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

Saya menggunakan kode ini:

tombol tampilkan-sembunyikan

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

tampilkan-sembunyikan elemen

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

naskah

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

Pembaruan: hapus jam tangan; tambahkan propagasi berhenti

Saya benci fungsi tambahan jadi ... berikut adalah solusi vue yang luar biasa tanpa metode vue tambahan, hanya var

1. membuat elemen html, mengatur kontrol dan arahan

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

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

2. membuat var dalam data seperti

data:{
   popup: false,
}

3. tambahkan vue directive. -nya

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

Jika Anda secara khusus mencari klik di luar elemen tetapi masih dalam induk, Anda dapat menggunakan

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

Saya menggunakan ini untuk modal.

Anda dapat mendaftarkan dua pendengar acara untuk acara klik seperti ini

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

Jawaban singkatnya: Ini harus dilakukan dengan Custom Directives .

Ada banyak jawaban bagus di sini yang juga mengatakan ini, tetapi sebagian besar jawaban yang saya lihat rusak ketika Anda mulai menggunakan klik luar secara ekstensif (terutama berlapis atau dengan beberapa pengecualian). Saya telah menulis artikel tentang medium yang membahas tentang nuansa Custom Directives dan khususnya implementasi yang satu ini. Ini mungkin tidak mencakup semua kasus tepi tetapi telah menutupi semua yang saya pikirkan.

Ini akan menjelaskan beberapa binding, beberapa tingkat pengecualian elemen lainnya, dan memungkinkan penangan Anda untuk hanya mengelola "logika bisnis".

Berikut kode untuk setidaknya bagian definisi itu, lihat artikel untuk penjelasan lengkap.

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

Saya melakukannya dengan cara yang sedikit berbeda menggunakan fungsi di dalam create ().

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

Dengan cara ini, jika seseorang mengklik di luar elemen, maka dalam kasus saya, navigasi seluler disembunyikan.

Semoga ini membantu!

Sudah ada banyak jawaban untuk pertanyaan ini, dan kebanyakan dari mereka didasarkan pada ide arahan kustom yang serupa. Masalah dengan pendekatan ini adalah seseorang harus meneruskan fungsi metode ke direktif, dan tidak bisa langsung menulis kode seperti di acara lain.

Saya membuat paket baru vue-on-clickoutyang berbeda. Lihat di:

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

Ini memungkinkan seseorang untuk menulis v-on:clickoutseperti acara lainnya. Misalnya, Anda bisa menulis

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

dan berhasil.

Memperbarui

vue-on-clickout sekarang mendukung Vue 3!

Hanya jika ada yang mencari cara menyembunyikan modal saat mengklik di luar modal. Karena modal biasanya memiliki pembungkusnya dengan kelas modal-wrapatau apa pun yang Anda beri nama, Anda dapat meletakkannya @click="closeModal"di pembungkusnya. Dengan menggunakan penanganan kejadian yang dinyatakan dalam dokumentasi vuejs, Anda dapat memeriksa apakah target yang diklik ada di bungkusnya atau di modal.

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>

Solusi @Denis Danilenko bekerja untuk saya, inilah yang saya lakukan: Dengan cara saya menggunakan VueJS CLI3 dan NuxtJS di sini dan dengan Bootstrap4, tetapi ini akan berfungsi di VueJS tanpa NuxtJS juga:

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

Anda dapat mengeluarkan peristiwa javascript asli khusus dari perintah. Buat direktif yang mengirimkan acara dari node, menggunakan 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)
    }
})

Yang bisa digunakan seperti ini

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

Saya membuat div di ujung badan seperti itu:

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

Dimana. Di luar adalah:

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

Dan away () adalah metode dalam Vue instance:

away() {
 this.isPopup = false;
}

Mudah, bekerja dengan baik.

Jika Anda memiliki komponen dengan banyak elemen di dalam elemen root, Anda dapat menggunakan solusi It just works ™ ini dengan boolean.

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

Gunakan paket ini vue-click-outside

Sederhana dan andal, saat ini digunakan oleh banyak paket lain. Anda juga dapat mengurangi ukuran paket javascript dengan memanggil paket hanya di komponen yang diperlukan (lihat contoh di bawah).

npm install vue-click-outside

Penggunaan:

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

Jangan menemukan kembali roda, gunakan paket ini v-click-outside

Anda dapat membuat komponen baru yang menangani klik luar

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

Dan gunakan komponen ini:

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

Seringkali orang ingin tahu apakah pengguna meninggalkan komponen root (bekerja dengan komponen level apa pun)

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

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

Saya punya solusi untuk menangani menu toggle dropdown:

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

Saya menggunakan paket ini: https://www.npmjs.com/package/vue-click-outside

Ini bekerja dengan baik untuk saya

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>

Kode skrip saya:

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