Onerrorイベント新しいクラスを追加し、画像ソースを何回置き換えるかを数えます

Question

私はonerror機能を使用して壊れたリンクを検出し、それらを画像で置き換えます。問題は、自分のコード内でOKです。

だから、その画像をクリックすることができないようにするには、imageOnErrorという関数を呼び出すとそのようにしたいと思います。 は、私はまた、このリクこの(img).unbind("click"); ようにそれを実行しようとしました：img.class = "blocked";

が、それは動作しませんか？/

私は本当に混乱しています：

<img class="img img-click not-selected " src="" onerror="return imageOnError(this);" /> 

countImgReplaced = 0; 
function imageOnError(img) { 
    img.onerror = ''; 
    img.src = 'https://dummyimage.com/256x256?text=Broken%20images%20.'; 
    (img).unbind("click"); 
    countImgReplaced ++; 
    return true; 
} 

は、そしてまた、私は、画像は私がcountImgReplacedと、それは私の画像の総数を与えることをやっ交換された回数を取得したいです。誰かが私を助けることができますか？

Answer 1

pointer-events: none;をクラスに適用することができます。あなたは、あなただけのHTMLタグでこれを行うことができます

CLASSLISTのAPIを使用して

こと、すなわち

img.classList.add('blocked'); 

Answer 2

適用することができます。

<img src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" /> 

$(document).ready(function(){ 
 
    $("img").click(function(){ 
 
    alert("Valid"); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div style="clear:both;"><lable>Click in image(Invalid img):</lable> 
 

 
<img width=200px height=200px src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" /> 
 
</div> 
 

 
<div style="clear:both;"><lable>Click in image (Valid img):<lable> 
 
<img width=200px height=200px src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQzltPjpuUfCzEsYbhTYTm4xab4wfmCTFoNllbU5ljLLEAb3VvJXkgpWvU" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" /></div>