Question

我有一个案例，在页面上有一个输入字段和一个到下一页的按钮。

现在，如果在输入上调用onblur事件，则应该保存数据并单击按钮，页面应该使用此页面中的最新数据重定向到下一页。

如果用户键入输入并直接点击按钮，则会同时调用这两个事件，并且不保存最新数据。

是否存在设计模式或此问题的常见解决方案？

Answer 1

解决方案1：您应该在保存数据时禁用该按钮。另外，不要忘记在某个地方设置一个指示器，让用户知道数据正在保存，这就是为什么他们无法进入下一页。

解决方案2 ：当用户点击时，您会检查数据是否已保存。如果尚未保存，则将其保存，然后在保存后重定向。

Answer 2

观察下面显示的演示

＆＃13;

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" ) );

＆＃13;

<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）。

Answer 3

你可以使用

onkeyup="myFunction()"

作为事件监听器

onslur和onclick一次在js

3 个答案: