双击img元素以触发click事件时，javascript中出现错误

Question

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title>imagegame</title>
        <style>
        body { margin: 20px; }
        img { margin: 20px; }
        </style>
    </head>
    <body>
        <img id="pic1" src="img/charpter9/zeroblur.jpg">
        <img id="pic2" src="img/charpter9/oneblur.jpg">
        <img id="pic3" src="img/charpter9/twoblur.jpg">
        <img id="pic4" src="img/charpter9/threeblur.jpg">
        <img id="pic5" src="img/charpter9/fourblur.jpg">
        <img id="pic6" src="img/charpter9/fiveblur.jpg">

        <script>

        function init() {
            var imgs = document.getElementsByTagName("img");
            for(var i = 0; i < imgs.length; i++){
                imgs[i].onclick = onClick;
            }
        }
        function onClick(e){
            var img = e.target;
            var imgsrc = img.src;
            var imgid = img.id;
            var imgsrc0 = imgsrc;
            imgsrc = imgsrc.replace("blur","");
            img.src = imgsrc;
            setTimeout(refresh, 5000, imgsrc0, imgid);
        }

        function refresh(imgsrc,id){
            var img = document.getElementById(id);
            img.setAttribute("src",imgsrc);
        }
        window.onload = init;
        </script>
    </body>
</html>

above is the code, my main consideration is whether there is a plan to solve mouse double-click when clicking on one element whose trigger is onclick. 上面是代码，我的主要考虑是在单击触发器为onclick的元素时是否有解决鼠标双击的计划。

the error I found is when I double-click the image showed on the page, the pic can't be reblurrd automatically. 我发现的错误是当我双击页面上显示的图像时，图片无法自动重新模糊。 the case is head-first javascript book chapter 9 on about page 142. 案例是关于页面142的第Java本书第9章。

thank for your time. 谢谢您的时间。

enter image description here 在此处输入图片说明

Answer 1

The main issue is, that the second time the src has no blur anymore already and the time the second timeout is finished it gets set to that src instead of the one with the blur. 主要问题是，第二次src不再具有模糊，并且第二次超时完成时，它将设置为该src而不是具有模糊的src 。

You could keep the original source in a data-attribute and set the src back on that attribute. 您可以将原始源保留在数据属性中，然后在该属性上重新设置src 。 Furthermore you can cancel the setTimeout() on doubleclicks. 此外，您可以取消双击的setTimeout() 。

function onClick(e){
    var img = e.target;
    var imgsrc = img.src;
    var imgid = img.id;
    var imgsrc0 = imgsrc;

    //REM: Keep the original src
    if(!img.getAttribute('data-img-src')){
        img.setAttribute('data-img-src', imgsrc)
    };

    imgsrc = imgsrc.replace("blur","");
    img.src = imgsrc;

    //REM: Clear and reassign the timeout
    clearTimeout(img.timeout); //REM: Dirty way, but fast to show
    img.timeout = setTimeout(refresh, 5000, imgsrc0, imgid)
}

function refresh(imgsrc,id){
    var img = document.getElementById(id);

    //REM: Set the original src
    img.setAttribute("src",img.getAttribute('data-img-src'));
    img.removeAttribute('data-img-src')
}

Yet I think it would be much easier to keep all the images in an object and create the img on the fly. 但是我认为将所有图像保留在一个对象中并即时创建img会容易得多。 Also it makes your code unbound from a fixed naming scheme in your image sources. 此外，它还使您的代码不受图像源中的固定命名方案的束缚。 Like this for example: 例如：

 var _Images = [ {Blurred: 'https://image.flaticon.com/icons/svg/172/172838.svg', Active: 'https://image.flaticon.com/icons/svg/196/196138.svg'}, {Blurred: 'https://image.flaticon.com/icons/svg/196/196138.svg', Active: 'https://image.flaticon.com/icons/svg/172/172838.svg'}, {Blurred: 'https://image.flaticon.com/icons/svg/172/172838.svg', Active: 'https://image.flaticon.com/icons/svg/196/196138.svg'} ]; window.onload = function(){ for(var i=0, j=_Images.length; i<j; i++){ var tImage = document.body.appendChild(document.createElement('img')); tImage.src = _Images[i].Blurred; tImage.setAttribute('width', '20px'); tImage.onclick = function(image){ this.src = image.Active; window.clearTimeout(image.Timeout); image.Timeout = window.setTimeout(function(){ this.src = image.Blurred }.bind(this, image), 5000) }.bind(tImage, _Images[i]) } };

双击img元素以触发click事件时，javascript中出现错误

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-09-06 14:01:54

双击img元素以触发click事件时，javascript中出现错误

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-09-06 14:01:54

解决方案1
0 已采纳 2018-09-06 14:01:54