I am trying to add an event handler to a div that has an image inside of the div. My problem is that the event only works if you double click outside the div right next to it. When you double click the picture inside the div it doesnt not trigger the event. How do I make it so that the event works both ways?

html

<div id="placeholder">
    <a href="" target="_blank">
        <img src=".jpg" alt="" />
    </a>
</div>

javascript

var pic;
pic = document.getElementById("placeholder");
pic.ondblclick = function() {
    pic.innerHTML = "blocked!";
}

demo /

I am trying to add an event handler to a div that has an image inside of the div. My problem is that the event only works if you double click outside the div right next to it. When you double click the picture inside the div it doesnt not trigger the event. How do I make it so that the event works both ways?

html

<div id="placeholder">
    <a href="http://google." target="_blank">
        <img src="http://www.fat-animals./wp-content/uploads/2009/03/11.jpg" alt="" />
    </a>
</div>

javascript

var pic;
pic = document.getElementById("placeholder");
pic.ondblclick = function() {
    pic.innerHTML = "blocked!";
}

demo http://jsfiddle/9DWrN/

• javascript
• html

• 2 The jsfiddle doesn't seem to match the question..? – mash Commented Aug 18, 2012 at 0:21
• Fixed the jsfiddle link jsfiddle/9DWrN – Daniel Commented Aug 18, 2012 at 0:22
• 3 That's because you have an anchor. You can't trigger ondblclick because when you do click you go to google.. – Oriol Commented Aug 18, 2012 at 0:23
• hmm ok so that works. Is there a way to make this work with an anchor tag? I want to be able to use this for my advertisements to prevent malicious clicks – Daniel Commented Aug 18, 2012 at 0:25
• check this jsfiddle/unloco/9DWrN/2 – unloco Commented Aug 18, 2012 at 0:26

3 Answers 3

check this fiddle http://jsfiddle/unloco/9DWrN/3/

var pic = document.getElementById("placeholder");
var clicked = false;
pic.onclick = function() {
    if(clicked) {
        pic.innerHTML = "blocked!";
    } else {
        clicked = true;
    }
    setTimeout(function(){
        clicked = false
    }, 333); //detect fast clicks (333ms)
}​

Your current solution actually works, it just doesn't seem like it, since you are redirected to a new page.

If you have Chrome (Firefox too probably, maybe even IE 8+), double middle click on the image (opens in new tab/window). Your event will still get fired. You can then proceed to preventDefault on these events.

Using a double click event is not the best idea to prevent malicious clicks though, as the double click event will only get thrown every two clicks. While a client side validation is bad to prevent malicious clicks anyways, its best to use a click event and check with a timer (i.e. throttle the event to a maxmimum of once every 200 milliseconds, or only allow it if there was not a previous click within the previous 200 milliseconds.

And what about changing pic.innerHTML at onclick?

See http://jsfiddle/4Kecd/

var = document.getElementById("placeholder");
pic.onclick = function() {
    pic.innerHTML = "blocked!";
    alert('The link has been blocked');
}

Even if you delete the link, it will be followed that time.

See http://jsfiddle/4Kecd/1/ too.

You can do...

var pic1 = document.getElementById("placeholder1"),
    clicked1=false;
pic1.onclick = function() {
    if(clicked1){
        alert("The link has been deleted. You can't follow the link twice!");
    }else{
        pic1.innerHTML = pic2.getElementsByTagName('a')[0].innerHTML;
        alert('The link has been deleted.\nHowever, the new tab will be opened when you accept this alert.');
        clicked1=true;
    }
}

...if you want to delete the link but you want the image.

Or you can just disable the link:

var pic2 = document.getElementById("placeholder2"),
    clicked2=false;
pic2.onclick = function(e) {
    var a=pic2.getElementsByTagName('a')[0];
    if(clicked2){
        alert("The link has been disabled. You can't follow the link twice!");
        a.href="#";/* Nonsense since we have disabled the link,
                      but we want to ensure that the link isn't followed*/
    }else{
        clicked2=true;
        a.onclick=function(){return false;}
        alert('The link has been disabled.\nHowever, the new tab will be opened when you accept this alert.');

    }
}

Note: UnLoCo's solution is good but its problem is that it doesn't prevent us from following the link.

Instead, you can disable the link at first click and enable it after some seconds:

var pic = document.getElementById("placeholder"),
    clicked=false;
pic.onclick = function(e) {
    var a=pic.getElementsByTagName('a')[0];
    if(clicked){
        alert("The link has been disabled. You can't follow the link twice!");
        a.href="#";
    }else{
        clicked=true;
        a.onclick=function(){return false;}
        if(!a.getAttribute('data-href')){
            a.setAttribute('data-href',a.href);
        }
        alert('The link has been disabled.\nHowever, the new tab will be opened when you accept this alert.');
        setTimeout(function(){enableLink(a);},5000);

    }
}
function enableLink(a){
    a.href=a.getAttribute('data-href');
    a.onclick=function(){return true;}
    clicked=false;
}

See it here: http://jsfiddle/4Kecd/2/