我有一个案例,在页面上有一个输入字段和一个到下一页的按钮。
现在,如果在输入上调用onblur事件,则应该保存数据并单击按钮,页面应该使用此页面中的最新数据重定向到下一页。
如果用户键入输入并直接点击按钮,则会同时调用这两个事件,并且不保存最新数据。
是否存在设计模式或此问题的常见解决方案?
答案 0 :(得分:2)
解决方案1:您应该在保存数据时禁用该按钮。另外,不要忘记在某个地方设置一个指示器,让用户知道数据正在保存,这就是为什么他们无法进入下一页。
解决方案2 :当用户点击时,您会检查数据是否已保存。如果尚未保存,则将其保存,然后在保存后重定向。
答案 1 :(得分:0)
观察下面显示的演示
var input1 = document.querySelector( "#inp1" );
var button = document.querySelector( "button" );
var button2 = document.querySelector( "input[type='button']" );
button.addEventListener( "click", () => console.log( "click" ) );
button2.addEventListener( "click", () => console.log( "click2" ) );
input1.addEventListener( "blur", () => console.log( "blur" ) );
input1.addEventListener( "change", () => console.log( "change" ) );

<input id="inp1"><br><br><br><button>Check</button><br><br><br><input type="button" value="Check 2">
&#13;
在
blur
事件之前, click
事件被触发,但在change
事件本身之前触发blur
事件 - 无论哪个按钮点击(input
或button
)。
答案 2 :(得分:-1)
你可以使用
onkeyup="myFunction()"
作为事件监听器