বাইরের উপাদানটি ক্লিক করুন

Question

আমি কীভাবে আমার উপাদানটির বাইরে থাকা একটি ক্লিক সনাক্ত করতে পারি? আমি Vue.js ব্যবহার করছি তাই এটি আমার টেম্পলেট উপাদানগুলির বাইরে থাকবে। আমি ভ্যানিলা জেএস-এ এটি কীভাবে করব তা আমি জানি, তবে আমি যখন ভ্যু.জেএস ব্যবহার করছি তখন এটি করার আরও সঠিক কোনও উপায় আছে কিনা তা আমি নিশ্চিত নই?

এটি ভ্যানিলা জেএসের সমাধান: ডিভের বাইরে জাভাস্ক্রিপ্ট সনাক্তকরণ ক্লিক ইভেন্ট

আমার ধারণা আমি উপাদানটি অ্যাক্সেস করার জন্য আরও ভাল উপায় ব্যবহার করতে পারি?

Comments

ভ্যু উপাদানগুলি বিচ্ছিন্ন। সুতরাং বাইরের পরিবর্তনগুলি সনাক্ত করা প্রশ্নবিদ্ধ নয় এবং এন্টি প্যাটার্ন ব্যবহৃত হয়।

— রাজ কমল

ধন্যবাদ। কীভাবে কোনও ভ্যু উপাদানটিতে এটি প্রয়োগ করা যায় তা সম্পর্কে আমি নিশ্চিত নই। অ্যান্টি-প্যাটার্নের জন্য এখনও কিছু সেরা অনুশীলন থাকতে হবে?

ভ্যু.জেস উপাদানগুলি বিচ্ছিন্ন, এটি সত্য, তবে পিতা-মাতার সন্তানের যোগাযোগের জন্য বিভিন্ন পদ্ধতি রয়েছে। সুতরাং, কোনও উপাদানের বাইরে কোনও ঘটনা সনাক্ত করতে বলার পরিবর্তে, আপনি নির্দিষ্ট উপাদানগুলির মধ্যে উপাদানগুলি সনাক্ত করতে চান কিনা তা নির্দিষ্ট করা উচিত, কোনও সন্তানের কাছ থেকে, মূল উপাদান থেকে, বা যে কোনও উপাদান উপাদানগুলির মধ্যে রয়েছে

— ইয়র্কো পলমা

সাহায্য করার জন্য ধন্যবাদ. আমি অনুসরণ করতে পারি কিছু উদাহরণ বা লিঙ্ক আছে?

github.com/simplesmiler/vue-clickaway আপনার কাজ সহজ করতে পারে

— রাজ কামাল

Answer 1

একবার কাস্টম নির্দেশিকা সেটআপ করে সুন্দরভাবে সমাধান করা যায়:

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

ক্যাভ্যাটস সম্পর্কে অতিরিক্ত তথ্যের সাথে জেএসফিডেলে কাজ করা ডেমো:

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

Comments

আমি ভ্যু ক্লিককওয়ে ব্যবহার করেছি, তবে আমি মনে করি আপনার সমাধান কম-বেশি একই। ধন্যবাদ।

এই পন্থা Vue.js 2 তে আর কাজ করে না The স্ব.ভি.এম. $ এমিট কল একটি ত্রুটি বার্তা দেয়।

— northernman

@ ব্লুর ব্যবহার করাও একটি বিকল্প এবং একই ফলাফল দেওয়া সহজতর করে: <ইনপুট @ ব্লার = "লুকান"> যেখানে লুকান: ফাংশন () {this.isActive = মিথ্যা; }

— ক্রস

উত্তরটি এমনভাবে সম্পাদনা করা উচিত যে আমি কেবল ভ্যু.জেএস 1

— স্টাফেন গারবার

Answer 2

আমি ব্যবহার করেছি এমন সমাধান রয়েছে যা লিনাস বোর্গ উত্তরের উপর ভিত্তি করে 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">

এখানে একটি ছোট ডেমো

Https://vuejs.org/v2/guide/custom-directive.html#Directive-Hook-Arguments- এ আপনি কাস্টম নির্দেশাবলী এবং এল, বাইন্ডিং, ভনোডের অর্থ সম্পর্কে আরও কিছু তথ্য পেতে পারেন

Comments

কাজ করেছে, কিন্তু ভিউ ২.০ তে নির্দেশিকাগুলির আর কোনও উদাহরণ নেই, সুতরাং এটি অপরিবর্তিত। vuejs.org/v2/guide/migration.html#Custom-Directives-smplified । এই ঝাঁকুনিটি কেন কাজ করে বা কখন এই সরলীকরণ করা হয়েছে তা সম্পর্কে আমার কোনও ধারণা নেই। (সমাধানের জন্য, ইভেন্টটিকে উপাদানটির সাথে আবদ্ধ করতে "এটিকে" "এল" দিয়ে প্রতিস্থাপন করুন)

— বুশটা

এটি সম্ভবত কাজ করে কারণ উইন্ডোটি "এটি" হিসাবে পাস করেছে। আমি উত্তর ঠিক করেছি। এই বাগটি নির্দেশ করার জন্য আপনাকে ধন্যবাদ।

— ম্যাডিসন ট্র্যাশ

বাইরে নির্দিষ্ট উপাদান বাদ দেওয়ার কোনও উপায় আছে কি? উদাহরণস্বরূপ, আমার বাইরে একটি বোতাম রয়েছে যা এই উপাদানটি খুলতে হবে এবং কারণ এটি উভয় পদ্ধতির ট্রিগার করে কিছুই ঘটে না।

— ইলভিনাস

আপনি দয়া করে vnode.context [বাঁধাইকরণ। এক্সপ্রেশন] (ইভেন্ট) ব্যাখ্যা করতে পারেন; ?

— সাইনাথ এসআর

কীভাবে এটি পরিবর্তন করবেন যাতে ভি-ক্লিক-বাইরের মধ্যে কোনও পদ্ধতির পরিবর্তে অভিব্যক্তিটি ট্রিগার করা যায়?

— রাফাদকো

Answer 3

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>

Comments

ওহো! আমি এটি সবচেয়ে সংক্ষিপ্ত এবং সবচেয়ে পরিষ্কার সমাধান হিসাবে খুঁজে পাই। এছাড়াও আমার ক্ষেত্রে কাজ করা একমাত্র।

— ম্যাট কোমার্নিকিকি

কেবল এটি যুক্ত করার জন্য, -1 এর ট্যাবিনডেক্স সেট করা হাইলাইট বক্সটি উপস্থিত হওয়া থেকে থামবে যখন আপনি উপাদানটিতে ক্লিক করবেন তবে এটি ডিভটিকে ফোকাসযোগ্য হতে দেবে।

— কলিন 19

কোনও কারণে -1 এর ট্যাবিনডেক্স আমার জন্য রূপরেখাটি আড়াল করে না, তাই আমি কেবলমাত্র outline: none;উপাদানটির জন্য ফোকাসে যুক্ত করেছি ।

— আর্ট

স্ক্রিনে স্লাইড হওয়া কোনও অফ-ক্যানভাস সাইড এনএভিতে আমরা এটি কীভাবে প্রয়োগ করতে পারি? সিডেনাভ ফোকাসটি ক্লিক না করা পর্যন্ত দিতে পারছি না,

— চার্লস ওকওয়ুয়াগু

এটি একেবারে সবচেয়ে শক্তিশালী উপায়। ধন্যবাদ! :)

— ক্যানেট রবার্ন

Answer 4

এই কাজের জন্য সম্প্রদায়ে দুটি প্যাকেজ উপলব্ধ রয়েছে (উভয়ই বজায় থাকে):

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

Comments

vue-clickawayপ্যাকেজ আমার সমস্যা নিখুঁতভাবে সমাধান। ধন্যবাদ

— আবদাল্লা আরবব

প্রচুর আইটেম সম্পর্কে কি? বাইরের ক্লিক ইভেন্ট সহ প্রতিটি আইটেম প্রতিটি ক্লিকে ইভেন্ট ফায়ার করবে। আপনি ডায়লগ তৈরি করার সময় এবং গ্যালারী তৈরি করার সময় ভয়ঙ্কর। অ-উপাদান যুগে আমরা নথি থেকে ক্লিক শুনছি এবং কোন উপাদানটি ক্লিক করা হয়েছিল তা পরীক্ষা করে দেখছি। তবে এখন এটি একটি ব্যথা।

— বিআর।

@ জুলিয়েন লে কুপানেক এই সমাধানটি আমি এখন পর্যন্ত সবচেয়ে ভাল পেয়েছি! এটি ভাগ করে নেওয়ার জন্য অনেক ধন্যবাদ!

— ম্যানুয়েল অ্যাব্যাসাল

Answer 5

এটি আমার জন্য ভ্যু.জেএস 2.5.২.২ এর সাথে কাজ করেছে:

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

Comments

এই উদাহরণের জন্য আপনাকে ধন্যবাদ। 2.6 মান এটি পরীক্ষা করা হয়েছে। কিছুটা ঠিক আছে, আনবাইন্ড পদ্ধতিতে আপনাকে অবশ্যই এটি দ্বারা কিছু সমস্যা সমাধান করতে হবে (আপনি আনবাইন্ড পদ্ধতিতে দেহের সম্পত্তি ভুলে গেছেন): document.body.body.removeEventListener ('ক্লিক করুন', এল .__ ভিউ ক্লিকআউটসাইড__); যদি তা না হয় - এটি প্রতিটি উপাদান বিনোদনের পরে (পৃষ্ঠা রিফ্রেশ) একাধিক ইভেন্ট শ্রোতাদের সৃষ্টি করবে;

— আলেক্সি শাবরামভ

Answer 6

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

  }
}

Answer 7

আমি সমস্ত উত্তর একত্রিত করেছি (ভ্যু-ক্লিকওয়ে থেকে একটি লাইন সহ) এবং আমার জন্য কার্যকর এই সমাধানটি নিয়ে এসেছি:

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>

Comments

সুন্দর নীচের @ ম্যাডিসন ট্র্যাশ উত্তর হিসাবে একই

— retrovertigo

Answer 8

মোবাইল সাফারি সমর্থন করার জন্য আমি ম্যাডিসন ট্র্যাশের উত্তর আপডেট করেছি (যার পরিবর্তে অবশ্যই 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');
    },
});

Answer 9

আমি এই কোডটি ব্যবহার করি:

শো-হাইড বোতাম

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

আপডেট: অপসারণ ঘড়ি; স্টপ প্রচার প্রচার করুন

Answer 10

আমি অতিরিক্ত ফাংশনগুলিকে ঘৃণা করি ... তাই কোনও অতিরিক্ত মান পদ্ধতি ছাড়াই এখানে দুর্দান্ত একটি সমাধান রয়েছে, কেবলমাত্র বৈচিত্র্য

1. এইচটিএমএল উপাদান তৈরি করুন, নিয়ন্ত্রণ এবং নির্দেশিকা নির্ধারণ করুন

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

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

2. মত ডেটাতে একটি ভেরি তৈরি করুন

data:{
   popup: false,
}

3. নির্দেশ নির্দেশিকা যোগ করুন। এর

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

Answer 11

যদি আপনি নির্দিষ্টভাবে উপাদানটির বাইরে কোনও ক্লিক খুঁজছেন তবে এখনও পিতামাতার মধ্যে থাকেন তবে আপনি ব্যবহার করতে পারেন

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

আমি এটি মডেলের জন্য ব্যবহার করি।

Answer 12

আপনি ক্লিক ইভেন্টের জন্য দু'জন ইভেন্ট শ্রোতাকে রেজিস্টার করতে পারেন

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

Comments

ধন্যবাদ। আমি এটি জানি, তবে এটি মনে হয় Vue.js এ করার আরও ভাল উপায় থাকতে হবে?

ঠিক আছে! উত্তর :) কিছু vue.js প্রতিভা দিন

— saravanakumar

Answer 13

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

Comments

ধন্যবাদ, নিখুঁতভাবে কাজ করা এবং অতিরিক্ত লাইব্রেরির প্রয়োজন না হলে একবার আপনার এটির প্রয়োজন হলে

— মেরিয়ান ক্লিহস্পিজ

Answer 14

সংক্ষিপ্ত উত্তর: এটি কাস্টম নির্দেশিকা দিয়ে করা উচিত ।

এখানে প্রচুর দুর্দান্ত উত্তর রয়েছে যা এটিও বলে, তবে আপনি যখন বাইরের-ক্লিকটি ব্যাপকভাবে ব্যবহার শুরু করেন (বিশেষত স্তরযুক্ত বা একাধিক বাদ দিয়ে) তখন আমি বেশিরভাগ উত্তরগুলি ভাঙ্গতে দেখেছি। আমি একটি নিবন্ধ লিখেছি কাস্টম ডাইরেক্টিভের সূক্ষ্মতা এবং এটির বিশেষত প্রয়োগের বিষয়ে মিডিয়াম কথা বলে । এটি সমস্ত প্রান্তের কেসগুলি কভার করতে পারে না তবে এটি আমার যা ভাবা হয়েছে তা সবই কভার করেছে।

এটি একাধিক বাইন্ডিং, একাধিক স্তরের অন্যান্য উপাদানকে ছাড় দেয় এবং আপনার হ্যান্ডলারের কেবল "ব্যবসায়িক যুক্তি" পরিচালনা করতে দেয়।

এটির কমপক্ষে সংজ্ঞা অংশের জন্য কোডটি এখানে রয়েছে, পূর্ণ বিবরণের জন্য নিবন্ধটি দেখুন।

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

Answer 15

আমি এটি তৈরি করা () এর মধ্যে কোনও ফাংশন ব্যবহার করে কিছুটা আলাদাভাবে করেছি।

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

এইভাবে, যদি কেউ উপাদানটির বাইরে ক্লিক করে, তবে আমার ক্ষেত্রে মোবাইল ন্যাভ লুকানো আছে।

আশাকরি এটা সাহায্য করবে!

Answer 16

এই প্রশ্নের ইতিমধ্যে অনেক উত্তর রয়েছে এবং তাদের বেশিরভাগ একই ধরণের কাস্টম নির্দেশনা ধারণার উপর ভিত্তি করে। এই পদ্ধতির সাথে সমস্যাটি হ'ল নির্দেশের কাছে একটি পদ্ধতি ফাংশনটি পাস করতে হয় এবং অন্য ইভেন্টগুলির মতো সরাসরি কোড লিখতে পারে না।

আমি একটি নতুন প্যাকেজ তৈরি 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 এখন ভ্যূ 3 সমর্থন করে!

Answer 17

কেউ যদি মডেলের বাইরে ক্লিক করার সময় মডেলকে কীভাবে আড়াল করবেন সেদিকে নজর রাখছেন। যেহেতু মোডালের সাধারণত তার ক্লাস modal-wrapবা আপনার নামকরণের কিছু দিয়ে তার মোড়ক থাকে তাই আপনি মোড়কে রাখতে পারেন @click="closeModal"। ভয়েজ ডকুমেন্টেশনে বর্ণিত ইভেন্ট হ্যান্ডলিং ব্যবহার করে আপনি ক্লিক করা লক্ষ্যটি র‍্যাপারে বা মডেলটিতে রয়েছে কিনা তা পরীক্ষা করতে পারেন।

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>

Answer 18

@ ডেনিস ডানিলেনকো সমাধানগুলি আমার পক্ষে কাজ করে, আমি যা করেছি তা এখানে: আমি যেভাবে ভ্যুজেএস সিএলআই 3 এবং নক্সেক্সটএস এখানে এবং বুটস্ট্র্যাপ 4 দিয়ে ব্যবহার করছি, তবে এটি নিউজটজেএস ছাড়া ভ্যুজেএস-এও কাজ করবে:

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

Answer 19

আপনি কোনও নির্দেশিকা থেকে কাস্টম নেটিভ জাভাস্ক্রিপ্ট ইভেন্ট নির্গত করতে পারেন। নোড.ডিস্পপ্যাচেন্ট ব্যবহার করে নোড থেকে একটি ইভেন্ট প্রেরণকারী একটি নির্দেশিকা তৈরি করুন

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')" )

Answer 20

আমি শরীরের শেষে এমন একটি ডিভ তৈরি করি:

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

যেখানে আউটসাইড:

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

এবং অ্যাওয়ে () হ'ল একটি পদ্ধতি হ'ল:

away() {
 this.isPopup = false;
}

সহজ, ভাল কাজ করে।

Answer 21

মূল উপাদানটির ভিতরে যদি আপনার একাধিক উপাদান রয়েছে তবে আপনি এটি ব্যবহার করতে পারেন এটি একটি বুলিয়ান সহ সমাধান an

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

Answer 22

এই প্যাকেজটি বাইরে ক্লিক করুন

এটি সহজ এবং নির্ভরযোগ্য, বর্তমানে অন্যান্য অনেক প্যাকেজ ব্যবহার করে। আপনি কেবল প্রয়োজনীয় উপাদানগুলিতে প্যাকেজটি কল করে আপনার জাভাস্ক্রিপ্ট বান্ডিলের আকার হ্রাস করতে পারেন (নীচে উদাহরণ দেখুন)।

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>

Answer 23

চাকাটি পুনরায় উদ্ভাবন করবেন না, বাইরে প্যাকেজটি ভি-ক্লিক করুন use

Comments

আমার উত্তরটি দেখুন, যা আমার সন্দেহ হয় যে আপনি এটি আরও ভাল পছন্দ করবেন।

— মি-সুন সসাই

Answer 24

আপনি নতুন উপাদান তৈরি করতে পারেন যা বাইরের ক্লিককে পরিচালনা করে

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>

Answer 25

ব্যবহারকারীরা প্রায়শই জানতে চায় যে ব্যবহারকারীরা মূল উপাদানটি ছেড়ে দেয় (কোনও স্তরের উপাদানগুলির সাথে কাজ করে)

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

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

Answer 26

টগল ড্রপডাউন মেনু পরিচালনা করার জন্য আমার কাছে একটি সমাধান রয়েছে:

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

Answer 27

আমি এই প্যাকেজটি ব্যবহার করছি: https://www.npmjs.com/package/vue-click-outside

এটি আমার জন্য দারুণ কাজ করছে

এইচটিএমএল:

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