小小书书 2019-06-17 12:40 采纳率: 33.3%
浏览 324
已采纳

手机端web网站一个很神奇的bug求助。关于按钮的click事件执行的问题。

首先这个问题是出子在手机端web访问网站上出现的,电脑上用谷歌访问就没有这个问题。

问题是这样的
我现在有两个方法

        function test2()
        {
            DoKoutu();
            test();
        }

然后我把这几个方法绑定到几个按钮上

 <button id="koutubtn" class="buttonblue" style="width: 300px; height: 120px" onclick="DoKoutu();">抠图完成</button>
 <button id ="kakaka" class="buttonred" style="width: 300px; height: 120px" onclick="test();">保存111</button>
<button id ="kakaka2" class="buttonred" style="width: 300px; height: 120px" onclick="test2();">保存222</button>

我的问题是这样的
当我分别点 抠图完成和保存111两个按钮的时候
按理说 就执行了DoKoutu()的方法和test()的方法。执行的结果是我想要的

但是我只点击保存222这个按钮的时候,按理说不就是一起执行了DoKoutu()和test()的方法么,结果执行的结果就不是我想要的,

这是为什么呢??求助

ps:
我的函数主题有绑定一些事件的代码,是跟这块有关系么??

document.getElementById("canvasmovediv").addEventListener(STA_EN, start, false);
document.getElementById("canvasmovediv").addEventListener(MV_EV, move, false);
document.getElementById("canvasmovediv").addEventListener(END_EV, end, false);
document.getElementById("canvasmovediv").addEventListener(END_EV, end, false);

ps2:主要用了canvas里面的一些东西。上面的move,start什么的是变量,有定义的。

function DoKoutu() {
            IsKouTuOk = true;
            a.fillBackColor();
            a.CreateClipArea();
            //重建个画布,用透明的颜色把取到的点重新截取一遍图,就没有蓝线了,目的是没有蓝线

            //document.getElementById("canvasDiv1").style.display = "none";
            //这一段要是智能成图的话就不用执行了
            if (!IsAutoKouTu) {
                document.getElementById("img3").src = document.getElementById("img1").src;
                $("#img1").attr("src", $("#canvas")[0].toDataURL("image/png"));

                var b = document.getElementById("canvas2").getContext("2d");
                var bobject = document.getElementById("canvas2");
                b.beginPath();
                for (var i = 0; i < a.can.pointList.length; i++) {
                    b.lineTo(a.can.pointList[i].pointx, a.can.pointList[i].pointy);
                }
                b.closePath();
                b.clip();
                _("img3").style.width = _("img1").style.width;
                _("img3").style.height = _("img1").style.height;
                var image = document.getElementById("img3");
                //drawImage的没问题
                b.drawImage(image, 0, 0, _("img1").style.width.replace("px", ""), _("img1").style.height.replace("px", ""));
            }
            else {
                var b = document.getElementById("canvas2").getContext("2d");
                var bobject = document.getElementById("canvas2");
                var image = document.getElementById("img1");
                $("#img5").attr("src", _("img1").src);
                b.drawImage(image, 0, 0, parseInt(_("img1").style.width.replace("px", "")), parseInt(_("img1").style.height.replace("px", "")));
            }
            //两个画布隐藏或者显示一下,截图用的画布隐藏,显示用的画布显示
             document.getElementById("canvasdrowDiv").style.display = "none";
             document.getElementById("canvasmovediv").style.display = "";

            //放到一个隐藏的img上 再让这个img写回来(前清空)
            //把全图画在另一张行的div上
            //如果是自动抠图的话,直接image1的画上去,image1为智能抠图完成之后的结果
            $("#img4").attr("src", $("#canvas2")[0].toDataURL("image/png"));
            var imagetemp = document.getElementById("img4");
            //  var imageback = document.getElementById("img2");
            document.getElementById("canvasmovediv").addEventListener(STA_EN, start, false);
            document.getElementById("canvasmovediv").addEventListener(MV_EV, move, false);
            document.getElementById("canvasmovediv").addEventListener(END_EV, end, false);
            document.getElementById("canvasmovediv").addEventListener(END_EV, end, false);
            SuoFangbeishu = 1; //滚轮缩放倍数初始为1
            _("canvasmovediv").onmousewheel = scrollFnc;

            //test();
            return true;
        }
    function test() {
        var imagetemp = document.getElementById("img4");
        c = _("canvas3");
        ctx = c.getContext("2d");
        ctx.drawImage(imagetemp, 0, 0, 940, 800);
        ctxW = c.width;
        ctxH = c.height;
        imgW = 940 || img.width;
        imgH = 800 || img.height;
        ctx.translate(imgW / 2, imgH / 2);
        //onDraw();
        ctx.save();
        //选的背景图片替换div的背景图片
        document.getElementById("canvasmovediv").style.backgroundImage = "url(" + document.getElementById("img2").src + ")";
        //抠图完成的按钮变为无法使用
        _("koutubtn").disabled = "disabled";
        _("koutubtn").className = "buttonblue disabledblue";
        _("autokoutubtn").disabled = "disabled";
        _("autokoutubtn").className = "buttongreen disabledgreen";
        onDraw();
        return true;
    }
  • 写回答

4条回答 默认 最新

  • 简单就好o_0 2019-06-17 16:25
    关注

    下面两个方法的代码没仔细看,不过我想你认为结果不对,应该是两个方法中有公用的变量或者后面的方法用到了前面方法的结果吧。分别点击执行这两个方法是有顺序的,第二个方法执行的时候,第一个方法已经执行完了。
    test2这样就等于让两个方法一起执行,就可能出现不同结果。你可以用settimeout延迟执行第二个方法来检查下

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥35 平滑拟合曲线该如何生成
  • ¥100 c语言,请帮蒟蒻写一个题的范例作参考
  • ¥15 名为“Product”的列已属于此 DataTable
  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题:最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面,并且报了如下错误,尝试过换显卡驱动,但是好像不行
  • ¥15 自己瞎改改,结果现在又运行不了了
  • ¥15 链式存储应该如何解决
  • ¥15 没有证书,nginx怎么反向代理到只能接受https的公网网站