ตรวจจับคลิกภายนอกองค์ประกอบ

ฉันจะตรวจจับการคลิกนอกองค์ประกอบของฉันได้อย่างไร ฉันใช้ 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 พร้อมข้อมูลเพิ่มเติมเกี่ยวกับข้อควรระวัง:

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

มีวิธีแก้ปัญหาที่ฉันใช้ซึ่งอ้างอิงจากคำตอบของ Linus Borg และทำงานได้ดีกับ 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)
  },
});

คุณผูกเข้ากับมันโดยใช้v-click-outside:

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

นี่คือตัวอย่างเล็ก ๆ

คุณสามารถค้นหาข้อมูลเพิ่มเติมเกี่ยวกับคำสั่งที่กำหนดเองและความหมายของel การผูก 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>

มีสองแพ็คเกจที่พร้อมใช้งานในชุมชนสำหรับงานนี้ (ทั้งสองอย่างได้รับการบำรุงรักษา):

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

สิ่งนี้ใช้ได้กับฉันด้วย 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

  }
}

ฉันได้รวมคำตอบทั้งหมด (รวมถึงบรรทัดจาก 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>

ฉันได้อัปเดตคำตอบของ MadisonTrash เพื่อรองรับ Mobile Safari แล้ว (ซึ่งไม่มีclickเหตุการณ์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');
    },
});

ฉันใช้รหัสนี้:

ปุ่มแสดงซ่อน

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

อัปเดต:ลบนาฬิกา; เพิ่มการขยายพันธุ์หยุด

ฉันเกลียดฟังก์ชั่นเพิ่มเติมดังนั้น ... นี่คือโซลูชัน vue ที่ยอดเยี่ยมโดยไม่ต้องใช้วิธี vue เพิ่มเติมเฉพาะ var

1. สร้างองค์ประกอบ html ตั้งค่าการควบคุมและคำสั่ง

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

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

2. สร้างข้อมูลที่หลากหลายเช่น

data:{
   popup: false,
}

3. เพิ่ม vue directive ของมัน

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

หากคุณกำลังมองหาการคลิกภายนอกองค์ประกอบโดยเฉพาะ แต่ยังอยู่ในระดับบนสุดคุณสามารถใช้

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

ฉันใช้สิ่งนี้สำหรับโมดอล

คุณสามารถลงทะเบียนผู้ฟังเหตุการณ์สองคนสำหรับเหตุการณ์คลิกเช่นนี้

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

คำตอบสั้น ๆ : สิ่งนี้ควรทำด้วยคำสั่งที่กำหนดเองคำสั่งที่กำหนดเอง

มีคำตอบที่ยอดเยี่ยมมากมายที่นี่เช่นกัน แต่คำตอบส่วนใหญ่ที่ฉันเห็นจะพังทลายลงเมื่อคุณเริ่มใช้การคลิกภายนอกอย่างกว้างขวาง (โดยเฉพาะอย่างยิ่งหลายชั้นหรือมีการยกเว้นหลายรายการ) ฉันได้เขียนบทความเกี่ยวกับสื่อที่พูดถึงความแตกต่างของคำสั่งที่กำหนดเองและการนำไปใช้โดยเฉพาะ อาจไม่ครอบคลุมขอบเคสทั้งหมด แต่ครอบคลุมทุกอย่างที่ฉันคิดไว้

สิ่งนี้จะอธิบายการเชื่อมโยงหลายระดับการยกเว้นองค์ประกอบอื่น ๆ หลายระดับและอนุญาตให้ตัวจัดการของคุณจัดการเฉพาะ "ตรรกะทางธุรกิจ"

นี่คือรหัสสำหรับส่วนความหมายอย่างน้อยที่สุดโปรดดูบทความเพื่อดูคำอธิบายทั้งหมด

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

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

ด้วยวิธีนี้หากมีคนคลิกนอกองค์ประกอบในกรณีของฉันระบบนำทางบนอุปกรณ์เคลื่อนที่จะถูกซ่อนไว้

หวังว่านี่จะช่วยได้!

มีคำตอบมากมายสำหรับคำถามนี้และส่วนใหญ่จะขึ้นอยู่กับแนวคิดคำสั่งที่กำหนดเองที่คล้ายคลึงกัน ปัญหาของแนวทางนี้คือเราต้องส่งฟังก์ชัน method ไปยังคำสั่งและไม่สามารถเขียนโค้ดได้โดยตรงเหมือนในเหตุการณ์อื่น ๆ

ฉันสร้างแพ็คเกจใหม่vue-on-clickoutที่แตกต่างออกไป ตรวจสอบได้ที่:

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

อนุญาตให้เขียนv-on:clickoutเหมือนกับเหตุการณ์อื่น ๆ ตัวอย่างเช่นคุณสามารถเขียน

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

และมันได้ผล

ปรับปรุง

vue-on-clickout ตอนนี้รองรับ Vue 3!

หากใครกำลังมองหาวิธีซ่อนโมดอลเมื่อคลิกนอกโมดอล เนื่องจากโมดอลมักจะมีกระดาษห่อหุ้มที่มีคลาสmodal-wrapหรืออะไรก็ตามที่คุณตั้งชื่อไว้คุณจึงสามารถใส่@click="closeModal"กระดาษห่อหุ้มได้ การใช้การจัดการเหตุการณ์ที่ระบุไว้ในเอกสาร vuejs คุณสามารถตรวจสอบได้ว่าเป้าหมายที่ถูกคลิกนั้นอยู่บน Wrapper หรือในโมดอล

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 ใช้ได้กับฉันนี่คือสิ่งที่ฉันทำ: โดยวิธีที่ฉันใช้ 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;
    }
  }
}

คุณสามารถปล่อยเหตุการณ์จาวาสคริปต์เนทีฟที่กำหนดเองจากคำสั่ง สร้างคำสั่งที่ส่งเหตุการณ์จากโหนดโดยใช้ 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 {
  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>

ใช้แพ็คเกจนี้vue-click-outside

ใช้งานง่ายและเชื่อถือได้โดยแพ็คเกจอื่น ๆ คุณยังสามารถลดขนาดบันเดิลจาวาสคริปต์ของคุณได้โดยเรียกใช้แพ็กเกจในส่วนประกอบที่จำเป็นเท่านั้น (ดูตัวอย่างด้านล่าง)

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>

อย่าสร้างวงล้อใหม่ให้ใช้แพ็คเกจนี้v-click-outside

คุณสามารถสร้างส่วนประกอบใหม่ที่จัดการคลิกภายนอก

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

และใช้ส่วนประกอบนี้:

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

บ่อยครั้งที่ผู้คนต้องการทราบว่าผู้ใช้ออกจากองค์ประกอบราก (ทำงานร่วมกับส่วนประกอบระดับใดก็ได้)

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