网上查看后发现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使用不熟练,就将遇到的问题及解决过程记录在博客园。菜鸟成长中

关于ul点击事件委托给li时的鼠标拖动问题的更多相关文章

  1. [JS]笔记14之事件委托

    -->什么是事件委托-->事件委托原理-->事件委托优点-->事件源 / 目标源 一.什么是事件委托 通俗的讲,onclick,onmouseover,onmouseout等这 ...

  2. 关于事件委托的整理 ,另附bind,live,delegate,on区别

    随着DOM结构的复杂化和Ajax等动态脚本技术的运用导致如今的js界里最火热的一项技术应该是‘事件委托(event delegation)’了,什么是事件委托呢?小七给你娓娓道来,说白了就是想给子元素 ...

  3. jQuery--事件, 事件绑定, 阻止事件冒泡, 事件委托,页面载入后函数

    1.常用事件, 按住shift键实现同步选择效果,搜索框联想效果 2.阻止事件冒泡 3.事件委托 4.使用 $(document).ready(function (){...}) 实现文件加载完绑定事 ...

  4. js 事件委托 事件代理

    JavaScript高级程序设计上解释:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 通过例子类比: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三 ...

  5. JavaScript / JQuery事件委托如何实现?

    一:什么是事件委托? 事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件. 事件委托就是利用事件冒泡原理实现的! 事件冒泡:就是事件从最深节点开始,然后逐步向上传播事件: 例:页面 ...

  6. JS事件委托(代理)学习笔记

    在开始之前我们先来熟悉一下HTML DOM addEventListener()方法,该方法用于向指定元素添加事件句柄.语法说明如下图所示: 主要想强调一下第三个参数useCapture,默认值为fa ...

  7. 事件处理& 事件委托& 区别mouseover与mouseenter

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. window.open('') 火狐,IE事件冒泡处理,点击事件冒泡处理

    window.open('') 火狐,IE事件冒泡处理,点击事件冒泡处理 写PC下拉菜单的时候,hover样式显示下拉菜单,可能会这样写 <li class="xb_li1" ...

  9. JQuery中的事件委托

    JQuery 中的事件委托 定义 事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能:其次可以让新元素的子元素也可以拥 ...

  10. JavaScript(jQuery)中的事件委托

    一:什么是事件委托? 事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件. 二:为什么要用事件委托? 1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整 ...

随机推荐

  1. react常见bug - 查询条件变化,但page未重置为1

    问题1.多次触发请求,且存在潜在的竞态问题 const [page, setPage] = useState(1); const [keyword, setKeyword] = useState('' ...

  2. 初步学习UE网络同步

    UE 网络同步和框架介绍 为一个UE引擎的初学者基于现有知识储备和见识的限制下,对UE网络和游戏框架的粗鄙之见,文中多有错误敬请指出以较后文. 1.网络复制 ​ 不论是服务端还是客户端,代码都是一样的 ...

  3. centos7 redis 无法用 systemctl 启动

    今天刚安装了redis,修改了 /etc/redis.conf 的内容. 尝试在 bind 后添加一个地址 "bind 127.0.0.1 -::* 192.168.2.1", 后 ...

  4. intellij idea中怎么没有git版本控制设置项

    在使用intellij idea的时候想要使用git进行版本控制,但是在设置项和界面没有发现相关内容,怎么回事呢? 我们先打开电脑,从桌面的快捷方式打开intellij idea,进入到intelli ...

  5. Springboot中使用枚举

    枚举映射数据库字段 配置枚举包扫描路径 mybatis-plus: # 扫描通用枚举 type-enums-package: com.xx.**.enums 方法一:@EnumValue 和 @Jso ...

  6. binary与进制转换

    精华笔记: 什么是二进制:逢2进1的计数规则.计算机中的变量/常量都是按照2进制来计算的 2进制: 规则:逢2进1 数字:0 1 基数:2 权:128 64 32 16 8 4 2 1 如何将2进制转 ...

  7. FtpClient上传文件异常:java.net.SocketException: Connection reset

    FtpClient上传文件异常:java.net.SocketException: Connection reset 这问题折磨我快一天了,下午这会儿终于解决了,问题不在程序错误,原因还是出在上传图片 ...

  8. C# DevExpress gridview 字符串尾部带数字如何排序

    我们经常遇到这样的问题,字符串尾部带数字,如何正确排序; 首先设置GridView ,Columns 的相关列,设置属性中,SortMode为Custom 解决思路,把字符串尾缀数字,分离出来.先比较 ...

  9. 1007.Django模型基础02

    一.常用的查询 常用的查询方法(注:User为app项目): 获取所有的记录: rs = User.objects.all() 获取第一条数据:rs = User.objects.first() 获取 ...

  10. spacy

    官方文档: https://spacy.io/api Spacy功能简介 可以用于进行分词,命名实体识别,词性识别等等,但是首先需要下载预训练模型 pip install --user spacy p ...