开发者社区> 问答> 正文

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>

展开
收起
a123456678 2016-03-11 10:36:54 2472 0
1 条回答
写回答
取消 提交回答
  • 1.假设每次添加的都是一个单独p或者div,可以给它添加一个删除键。
    2.或者添加一个撤销上次操作,获取#show的内容,用空格或者你选定一个符号作为分隔符分割为数组,然后删除掉最后一个,再组成字符串输出,当然前提是你每次添加之间本身就有指定的分隔。
    3.还有个更简单的,定义一个数组,把每次输出的结果保存起来,撤销就直接获取就好了,当然,得定义大小,和Photoshop里用历史纪录的方式一样。

    2019-07-17 18:58:38
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript函数 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载