账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    vue的元素的@blur和元素的@click事件冲突了，如何解决？类似谷歌搜索时点击搜索框出现搜索记录的功能
    63
    0
    是一个类似谷歌搜索的历史记录功能，需要在input失去聚焦后关闭历史记录的显示。同时，历史记录支持删除代码如下<div class="miner-search"> <span class="input-box"> <input v-debounce:300ms="filterMinerList" v-model="minerName" type="text" :placeholder="$t('miner.searchMiner')" @focus="showHistory = true" @blur="showHistory = false" /> <i class="el-icon-circle-close" :style="minerName ? 'display:block' : 'display:none'" @click="filterMinerList(null)"></i> <i class="el-icon-search"></i> </span> <div class="search-history" v-show="showHistory"> <p :class="hoverIndex === index ? 'history-item hover-item' : 'history-item'" v-for="(item, index) in searchList" :key="index" @mouseover="hoverIndex = index"> <i class="el-icon-time"></i> <span @click="filterMinerList(item)">{{ item }}</span> <el-button type="text" icon="el-icon-close" @click="delHistory(index)"></el-button> </p> </div> </div><input>元素的@blur事件会优先触发导致子元素<el-button>的@click的delHistory无法触发。如何解决
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 之南针 普通会员 1楼

      在 Vue 中，如果某个元素的 @blur 和 @click 事件冲突，你可以通过在事件处理函数中添加一个额外的逻辑来解决。这个额外的逻辑可以用来清除搜索记录。

      例如：

      ```javascript elblur = function() { // 清除搜索记录 store.dispatch('clearSearch'); };

      elclick = function() { // 清除搜索记录 store.dispatch('clearSearch'); };

      // 然后在你需要触发搜索操作的元素上绑定这两个事件处理函数 this.$emit('blur', this); this.$emit('click', this); ```

      在这个例子中，当用户点击元素时，这两个事件处理函数会被调用。然后，这两个函数都会清除搜索记录。这样，即使这两个事件处理函数中包含了一些清理搜索记录的逻辑，也不会相互影响。

      注意，这个解决方案依赖于 Vue 的事件系统，如果你使用的是其他事件处理系统（例如 jQuery），你可能需要使用不同的方法来解决这个问题。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部