enter(click) 与 blur冲突的解决办法

需求描述

inputon-enteron-blur 事件触发时保存文本,文本不能有重复。

问题描述

on-enter 触发之前会先触发 on-blur 导致执行两次保存操作,第二次也就是 on-enter 触发的时候会提示文本重复,保存不成功

解决办法

设置一个全局变量 iSave: falseif(!iSave) 执行保存操作,下次触发编辑文本之前再将 iSave 重置为 false

补充

网上还有另一种比较常用的解决办法,就是给 on-blur 事件设置定时器延迟触发。但是 on-blur 到底比 on-enter 早多久触发还要看具体情况,在我这个项目中测试了几次,一般是1-2s偶尔超过2s或低于1s,也会受网络和接口的影响。所以我没有用这种解决办法。

以上。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
MathJax.Hub.Queue(["Typeset", MathJax.Hub, newFormula]); newFormula.addEventListener("dblclick", function(event) { event.stopPropagation(); }); newFormula.addEventListener("mousedown", function(event) { event.stopPropagation(); selectedFormula = newFormula; isDragging = true; newFormula.style.cursor = "move"; }); newFormula.addEventListener("mouseup", function(event) { event.stopPropagation(); isDragging = false; newFormula.style.cursor = "auto"; }); newFormula.addEventListener("mousemove", function(event) { event.stopPropagation(); if (isDragging && selectedFormula === newFormula) { var newX = event.clientX - selectedFormula.offsetWidth / 2; var newY = event.clientY - selectedFormula.offsetHeight / 2; selectedFormula.style.left = newX + "px"; selectedFormula.style.top = newY + "px"; } }); newFormula.addEventListener("keydown", function(event) { if (event.key === "Enter") { event.preventDefault(); newFormula.blur(); MathJax.Hub.Queue(["Typeset", MathJax.Hub, newFormula]); } }); } document.getElementById("canvas").addEventListener("dblclick", function(event) { navigator.clipboard.readText().then(function(text) { if (text) { var latexCode = text.trim(); if (latexCode) { createFormula(latexCode, event.clientX, event.clientY); } } }); }); document.getElementById("canvas").addEventListener("click", function(event) { if (event.target === document.getElementById("canvas")) { if (selectedFormula) { selectedFormula.style.border = "none"; selectedFormula = null; isDragging = false; } } }); </script> </body> </html>
最新发布
07-14
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值