Phát hiện detect sự kiện out click cho một element trong vue js

19/09/2022 01:14 322

Table of Contents

Ví dụ minh họa bên dưới khi chúng ta muốn click bên ngoài form thì tất cả filter phải đóng, vậy làm sao để detect sự kiện này?

Tạo ra đoạn lệnh để detect out event một element

Vue.directive('clickoutside', {
  inserted: (el, binding, vnode) => {
// assign event to the element
    el.clickOutsideEvent = function (event) {
      // here we check if the click event is outside the element and it's children
      if (!(el == event.target || el.contains(event.target))) {
        // if clicked outside, call the provided method
        vnode.context[binding.expression](event)
      }
    }
// register click and touch events
    document.body.addEventListener('click', el.clickOutsideEvent)
    document.body.addEventListener('touchstart', el.clickOutsideEvent)
  },
  unbind: function (el) {
// unregister click and touch events before the element is unmounted
    document.body.removeEventListener('click', el.clickOutsideEvent)
    document.body.removeEventListener('touchstart', el.clickOutsideEvent)
  },
  stopProp(event) {
    event.stopPropagation()
  },
})

Vue.directive('clickoutside', {

inserted: (el, binding, vnode) => {

// assign event to the element

el.clickOutsideEvent = function (event) {

// here we check if the click event is outside the element and it's children

if (!(el == event.target || el.contains(event.target))) {

// if clicked outside, call the provided method

vnode.context[binding.expression](event)

}

// register click and touch events

document.body.addEventListener('click', el.clickOutsideEvent)

document.body.addEventListener('touchstart', el.clickOutsideEvent)

unbind: function (el) {

// unregister click and touch events before the element is unmounted

document.body.removeEventListener('click', el.clickOutsideEvent)

document.body.removeEventListener('touchstart', el.clickOutsideEvent)

stopProp(event) {

event.stopPropagation()

})

Cách dùng

khi click ngoài thẻ div thì function offAllFilter sẽ được thực hiện và thực hiện như thế nào thì do chúng ta muốn thôi

<div class="realhomeschild_form_search" v-clickoutside="offAllFilter" >
</div>

1 2	<div class="realhomeschild_form_search" v-clickoutside="offAllFilter" > </div>

5/5 (1 Đánh giá)

Các bài viết khác có thể hữu ích với bạn

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Tạo modal để thay thế cho vue-js-modal trong vuejs 2 [ 25/02/2023 12:39 ]
Tạo event click ngoài một element trong vue js [ 10/12/2022 02:09 ]
Dùng datetime picker plugin jquery trong vuejs [ 04/11/2022 02:41 ]
Cách tạo form multi field row dùng vue js [ 16/10/2022 03:47 ]
Làm option settings wordpress bằng vue js [ 15/10/2022 09:39 ]
Thực hiện ajax trong vòng lặp trong vue js [ 05/10/2022 01:19 ]
Import file excel tới data dùng thư viện php excel và vue js [ 01/10/2022 07:45 ]
Live search trong array với vue js [ 19/09/2022 03:44 ]
Sử dụng filter trong array để làm chức năng tìm kiếm cho vue js [ 09/09/2022 07:20 ]
Vue js trong một bài viết [ 10/08/2022 08:21 ]

Phát hiện detect sự kiện out click cho một element trong vue js

Tạo ra đoạn lệnh để detect out event một element

Cách dùng

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)