javascript - js如何撤销上一个click事件
本文介绍了javascript - js如何撤销上一个click事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
代码如下,点击一个button后发现点错了,如何把div里显示的内容还原到点击前?刚接触js,请各位前辈赐教。
<div id="wrap">
<div id="show"></div>
<input type="button" value="a" />
<input type="button" value="b" />
<input type="button" value="c" />
</div>
<script>
var odiv = document.getElementById('show')
var oinput = document.getElementById('wrap').getElementsByTagName('input');
for (var i = oinput.length - 1; i >= 0; i--) {
oinput[i].onclick = function(){
var str = this.value;
odiv.innerText += str;
}
}
</script>
结合各位前辈的指导,我找到了用数组解决的方法。定义一个全局数组和一个全局变量,div里的innerText每改变一次,都用数组将它记录下来。每回撤一次只要找到上一个数组里存储的内容就可以了,而且可以回撤任意次。代码如下。
<div id="wrap">
<div id="show"></div>
<input type="button" value="a" />
<input type="button" value="b" />
<input type="button" value="c" />
<input type="button" value="撤销" />
</div>
<script>
var odiv = document.getElementById('show')
var oinput = document.getElementById('wrap').getElementsByTagName('input');
var a = new Array(),
j = 0;
for (var i = oinput.length - 2; i >= 0; i--) {
oinput[i].onclick = function(){
var str = this.value;
a[j] = odiv.innerText;
j++;
odiv.innerText += str;
}
}
oinput[3].onclick = function(){
j--;
odiv.innerText = a[j];
}
</script>
解决方案
<div id="wrap">
<div id="show"></div>
<input type="button" value="a" />
<input type="button" value="b" />
<input type="button" value="c" />
</div>
<input type="button" value="撤销" onclick="revoke()"/>
<script>
var odiv = document.getElementById('show');
var oinput = document.getElementById('wrap').getElementsByTagName('input');
var stack=[]; //存放记录;
for (var i = oinput.length - 1; i >= 0; i--) {
(function(i) {
oinput[i].onclick = function(){
var str = this.value;
stack.push(str);
odiv.innerHTML += str;
}
})(i)
}
function revoke(){
if(stack){
stack.pop(); //删除最后一个元素
odiv.innerHTML="";
for(var i=0,l=stack.length;i<l;i++){
odiv.innerHTML += stack[i];
}
}
}
</script>
其实就是需要一个数组把之前的值保存,撤销就是删除最后一个,并重新输出。
只是提供思路,代码自行优化。
这篇关于javascript - js如何撤销上一个click事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文