Malunan个人博客|IT技术博客 Malunan个人博客|IT技术博客
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
    • HTML
    • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 脚本
  • 剪辑
关于
  • 网站
  • 常用的前端轮子
  • 工具网站
  • 软件工具
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Lunan Ma

升职加薪搞钱~
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
    • HTML
    • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 脚本
  • 剪辑
关于
  • 网站
  • 常用的前端轮子
  • 工具网站
  • 软件工具
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 技术文档

    • Git使用手册
    • Markdown使用教程
    • npm常用命令
    • 移动端兼容问题
    • 常用cmd命令
    • npm packageJson属性详解
    • yaml语言教程
    • Git修改分支名
    • javaScript-时间相加,超过24小时继续累加
    • 获取视频文件第一帧
    • 前端获取文件下载进度
    • 前端获取上传的视频图片详细信息
    • 解决拖拽时,如果元素内有input,无法选中文本的问题
      • 问题
      • 解决方案
    • css点击穿透
    • vue插槽传参
    • 谷歌浏览器的kiosk模式
    • 前台下载后台返的二进制文件流
    • css实现无缝切换跑马灯样式
    • 前端优化规范
    • 懒加载+无感删除list思路
  • GitHub技巧

  • Nodejs

  • 博客搭建

  • 脚本

  • 技术
  • 技术文档
MaLunan
2024-02-29
目录

解决拖拽时,如果元素内有input,无法选中文本的问题

# 问题

拖拽元素内有input,无法选中input内的文本

原因:拖拽属性和鼠标长按选中有冲突

# 解决方案

给input设置事件。如果鼠标按下 就取消父元素拖拽属性,input失去焦点时重新设置

// 给元素事件 鼠标按下 mousedown 失去焦点 blur  绑定事件 disableDrag setbleDrag
  <a-input  @mousedown="disableDrag" @blur="setbleDrag"  style="width: 80%;"  placeholder="" v-model="record.merchandiseUrlOrder"/>

1
2
3
// 当在input中鼠标按下时,取消父元素的draggable属性
 disableDrag(event) {
    var ev = event || window.event
    // 这里的parentNode层级 根据input所在的层级而定
    ev.target.parentNode.parentNode.parentNode.draggable = false
},
// 当鼠标离开input时,打开父元素的draggable属性
setbleDrag(event) {
    var ev = event || window.event
    // 这里的parentNode层级 根据input所在的层级而定
    ev.target.parentNode.parentNode.parentNode.draggable = true
},
1
2
3
4
5
6
7
8
9
10
11
12
编辑 (opens new window)
上次更新: 2024/02/29, 15:10:43
前端获取上传的视频图片详细信息
css点击穿透

← 前端获取上传的视频图片详细信息 css点击穿透→

最近更新
01
懒加载+无感删除list思路
11-12
02
移动端兼容问题
11-12
03
前端优化规范
03-25
更多文章>
Theme by Vdoing | Copyright © 2019-2024 LuNan Ma | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式