实现双击重新编写文字内容,并且不触发父元素单击事件
最近接一个新需求,要求双击时文字变成输入框失去焦点自动保存到服务器
本来双击编辑文字并不困难,但是文字的父元素有正好有请求服务器的点击事件
如果不能阻止的话会导致无意义的多次请求服务器,就研究了一下解决方法,下面上代码,基于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="删除当前页"></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); }) } } } },
以上代码即可实现上文提到的需求切不触发父元素的事件
核心就是在目标元素的点击事件中阻止冒泡,并在点击事件中在定义其双击事件即可
龙丘居士亦可怜,谈空说有夜不眠。
忽闻河东狮子吼,拄杖落手心茫然。
多有画面感