雙擊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>

上面是代碼，我的主要考慮是在單擊觸發器為onclick的元素時是否有解決鼠標雙擊的計划。

我發現的錯誤是當我雙擊頁面上顯示的圖像時，圖片無法自動重新模糊。 案例是關於頁面142的第Java本書第9章。

謝謝您的時間。

在此處輸入圖片說明

Answer 1

主要問題是，第二次src不再具有模糊，並且第二次超時完成時，它將設置為該src而不是具有模糊的src 。

您可以將原始源保留在數據屬性中，然后在該屬性上重新設置src 。 此外，您可以取消雙擊的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')
}

但是我認為將所有圖像保留在一個對象中並即時創建img會容易得多。 此外，它還使您的代碼不受圖像源中的固定命名方案的束縛。 例如：

 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