首页 > 其他分享 >关于ul点击事件委托给li时的鼠标拖动问题

关于ul点击事件委托给li时的鼠标拖动问题

时间:2022-08-22 22:36:28浏览次数:48  
标签:触发 拖动 li ul 点击 whosValue

网上查看后发现Click可以被两个事件触发:mouseUp与mouseDown,即点击和松开时都会触发一次。

随后当我从一个li点击拖动到其他li松开时,触发的事件对象因为冒泡变成了父元素ul,并非我们想要的当前触发对象li。在ul点击事件时添加触发事件对象判断即可:

    var majorContentDown = document.querySelector(".majorContentDown");//获取ul     var major = document.querySelector("#major");//获取input     function clickLi(obj, whosValue) {         obj.addEventListener('click', function (e) {                        if (e.target === obj) {                 whosValue.value = "请勿拖动";             }             else {                 whosValue.value = e.target.innerHTML;                 whosValue.style.color = "black";             }         }, false);//允许冒泡     }     clickLi(majorContentDown, major);   以上是我在搞学年设计时,利用事件冒泡将点击的li中的innerHTML给到表单input中,正常点击是没问题的,调试时发现拖动后事件触发对象不是鼠标松开所在的li,JS将ul中的内容全给了input。github使用不熟练,就将遇到的问题及解决过程记录在博客园。菜鸟成长中

 

标签:触发,拖动,li,ul,点击,whosValue
From: https://www.cnblogs.com/zibai/p/16614482.html

相关文章

  • linux su && su - 区别
    linuxsu&&su-区别1.1区别su的全称是switchusersu-就是login-shell的方式,也就是说切换到另一个用户之后,当前的shell会加载对应的环境变量和各种设置su就是no......
  • Liunx性能监控
    场景:这几天项目做的差不多了,但是服务器经常崩掉,然后之前用c#写的性能监控模块也不准,于是放弃了。还是用别人的模块吧。这里我采用nodeexport+prometheus+grafana......
  • PAT Advanced 1024 Palindromic Number(25)
    题目描述:AnumberthatwillbethesamewhenitiswrittenforwardsorbackwardsisknownasaPalindromicNumber.Forexample,1234321isapalindromicnumber......
  • linux 下如何离线安装java
    如果能在线安装就在线安装把,我的Ubuntu16的版本太老了,在线安装总是失败这里我就选择离线安装了进入网址https://www.oracle.com/java/technologies/downloads/#java1......
  • linux学习——Tab键用法
    笔记来自琼杰笔记一、命令补全1、命令补全内部命令:外部命令:bash根据PATH环境变量定义的路径,自左而右在每个路径搜寻已给定命令命名的文件,第一次找到的命令即为要执行......
  • ubuntu如何使alias别名永久生效?
    cd/etcsudovimbash.bashrc在后面加上你要的别名比如我这里加上aliasll='ls-al--color'   退出重新登录就好了 参考资料https://www.cnblogs.com/......
  • PHP serialize()与unserialize()
    大多数时候,PHP开发人员需要在文件或数据库中存储一个复杂的数组。复杂的数组是那些具有多个单一数据类型或数组元素的数组。在本教程中,我们将向您展示如何使用 serialize......
  • Ubuntu 16 遇到 No module named 'apt_pkg' 怎么办?
    sudoapt-getinstallpython3-apt--reinstallcd/usr/lib/python3/dist-packagesllapt_pkg.cpython-*sudoln-sapt_pkg.cpython-{your-version-number}-x86_64-li......
  • 【C++-笔记】访问说明符public、protected和private的用途和区别
    在C++当中,访问说明符主要在如下两个场景中使用:成员访问说明符当我们在定义/声明一个类时,需要使用成员访问说明符来说明成员的访问权限,public、protected和private的区别......
  • Spring 循环依赖引起 This is very likely to create a memory leak 问题
    背景:在公司测试环境发布测试的时候,发布失败了。日志报错:Thisisverylikelytocreateamemoryleak 。但是奇怪的是我的本地idea是启动正常的。没问题的。然后就跟运维......