• 实现双击重新编写文字内容,并且不触发父元素单击事件


    最近接一个新需求,要求双击时文字变成输入框失去焦点自动保存到服务器

    本来双击编辑文字并不困难,但是文字的父元素有正好有请求服务器的点击事件

    如果不能阻止的话会导致无意义的多次请求服务器,就研究了一下解决方法,下面上代码,基于vue使用的

    <div class="page-tit"  v-for="(item,index) in pageList" :class="{choicePage:index === num}" 
    @mouseenter="enter(item,index)" @mouseleave="leave()" @click="changePage(item.ID,index)"> 父元素点击事件 <span @click.stop="edit(item)">{{item.NAME}}</span>  编辑的点击事件 <i class="iconfont" @click.stop="showDelMask(item.ID,index)" title="删除当前页">&#xe60f;</i> </div>

    上面是html代码,细心的小伙伴应该已经发现了此处使用的并不是双击而是单击事件

     edit(item,evt){//修改页面名称
                evt = evt || window.event;//事件源
                evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true;//阻止冒泡
                let ele = evt.target//找到触发事件的元素也就是上面的span
                let oldText = ele.innerHTML//未修改的文字
                ele.ondblclick = function(){//在单击事件中使用双击事件
                    console.log('双击')
                    let newInput = document.createElement('input');//新建input
                    newInput.type = 'text';//设定input的属性
                    newInput.value = oldText;//设定input内容
                    newInput.maxLength = '10';//限定最多输入字数
                    ele.innerHTML = '';//清空span中的内容
                    ele.appendChild(newInput);//追加input到span中
                    newInput.focus();//让input得到焦点
                    newInput.onblur = ()=>{//input失去焦点时触发的事件
                        if(newInput.value == oldText){//如果文本没有改变返回原文本
                            ele.innerHTML = oldText;
                        }else{
                            ele.innerHTML = newInput.value;//文本改变了显示改变后的内容并发送到服务器保存
                            let body = {
                                ID:item.ID,
                                CODE:item.CODE,
                                NAME:newInput.value,
                                TYPE:'复合页面',
                                SYSTEM_TYPE:'移动端H5',
                                REMARK:newInput.value,
                            }
                            ajax(
                                {
                                    "HEAD":{"INTERFACE_CODE": "BAN_PAGE_CREATE_UPDATE"},
                                    "BODY":{
                                        PAGE:body,
                                    },
                                },function(res){
                                console.log(res,'修改名称')
                                // if(res.PAGE_ID.length>0){
                                //     addPage.getPageList(res.PAGE_ID);
                                // }
                                
                                // renderComponents(response.LIST_BANNER);
                            })
                        }
                        
                    }
                }
                
            },

    以上代码即可实现上文提到的需求切不触发父元素的事件

    核心就是在目标元素的点击事件中阻止冒泡,并在点击事件中在定义其双击事件即可

  • 相关阅读:
    Hadoop开发者第四期
    改进型MapReduce
    MakeDirZ.bat
    Scan Type.txt
    获取当前目录所有文件名.bat
    subst文件夹映射到盘符
    MainApi
    创建dos命令窗口快捷方式的批处理
    Cheat Engine通关教程 (8关).txt
    获取当前目录所有文件名 并且保存为1个00000.txt的文件文件bat
  • 原文地址:https://www.cnblogs.com/ybhome/p/11726625.html
Copyright © 2020-2023  润新知