vue构造函数，判断当前点击事件是否是某一指定元素外的点击事件，判断当前点击事件是否不是其本身

叁歲伎倆 2022-04-10 04:15 627阅读 1赞

html

<div v-clickoutside="handleClose"></div>
    //当点击此div外的任何元素 将会触发 v-clickoutside="handleClose"的 handleClose

构造点击函数

const clickoutside = {
      // 初始化指令
      bind (el, binding, vnode) {
        function documentHandler (e) {
          // 这里判断点击的元素是否是本身，是本身，则返回
          if (el.contains(e.target)) {
            return false
          }
          // 判断指令中是否绑定了函数
          if (binding.expression) {
            // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
            binding.value(e)
          }
        }
        // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
        el.__vueClickOutside__ = documentHandler
        document.addEventListener('click', documentHandler)
      },
      update () { },
      unbind (el, binding) {
        // 解除事件监听
        document.removeEventListener('click', el.__vueClickOutside__)
        delete el.__vueClickOutside__
      }
    }

在vue里注册构造的函数

export default {
      
      directives: { clickoutside },
      
      methods:{
       handleClose () { // 点击除了页面其他地方关闭车型选择
          this.carBrandOff = false
        }
      }
    }

# **ojbk!** #

发表评论取消回复

表情：

评论列表（有 0 条评论，627人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery点击事件(jquery触发点击事件onclick)

jquery实现远程http的get请求用哪个事件？jquery ![jquery点击事件][jquery] jquery实现远程http的get请求用哪个事件？jq

系统管理员/ 2023年09月26日 15:01/ 0 赞/ 178 阅读

相关 js点击事件(Js点击事件冲突怎么办)

JS点击onclick事件这个是闭包的问题 for (var i = 12; i <= 16; i++) \{ (function(i)\{ 第12个点击事

末蓝、/ 2023年09月26日 14:47/ 0 赞/ 171 阅读

相关 vue 的点击事件怎么获取当前点击的元素

// 首先 vue的点击事件是用 @click = “clickfun()” 属性在html中绑定的, // 在点击的函数中添加$event 参数就可以

缺乏、安全感/ 2023年06月15日 09:54/ 0 赞/ 24 阅读

相关 jQuery判断点击事件是否位于div之外

点击效果： ![20191014173722590.gif][] HTML <div id="outer"> <div id="inner" st

Myth丶恋晨/ 2023年06月07日 10:57/ 0 赞/ 5 阅读

相关判断当前点击是否和已选中的列表是连续?

![效果图][20200812150412826.png_pic_center] 这是要做的连续点击的效果,中间不能断开选择 // 判断选择的两个时间段是不是连续

心已赠人/ 2022年11月26日 15:56/ 0 赞/ 131 阅读

相关点击事件

javascript教程 function displayDate()\{ document.getElementById("demo").inner

朴灿烈づ我的快乐病毒、/ 2022年06月08日 02:07/ 0 赞/ 328 阅读

相关 Vue点击事件

1.点击事件 <div v-on:click=openTab(item); class="message-item message-unread" v-for="

ゞ浴缸里的玫瑰/ 2022年05月19日 00:22/ 0 赞/ 329 阅读

相关 vue构造函数，判断当前点击事件是否是某一指定元素外的点击事件，判断当前点击事件是否不是其本身

html <div v-clickoutside="handleClose"></div> //当点击此div外的任何元素将会触发 v-clickoutsi

叁歲伎倆/ 2022年04月10日 04:15/ 1 赞/ 628 阅读

相关 vue点击事件获取当前元素对象

Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!',

女爷i/ 2022年01月31日 00:37/ 0 赞/ 520 阅读

相关 vue 的点击事件怎么获取当前点击的元素

首先 vue的点击事件是用 @click = “clickfun()” 属性在html中绑定的, 在点击的函数中添加$event 参数就可以比

￡神魔★判官ぃ/ 2021年11月02日 07:44/ 0 赞/ 738 阅读