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

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

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

如果不能阻止的话会导致无意义的多次请求服务器，就研究了一下解决方法，下面上代码，基于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);
                        })
                    }
                    
                }
            }
            
        },

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

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