0

我正在尝试将事件处理程序添加到在 div 内具有图像的 div 中。我的问题是，该事件仅在您双击旁边的 div 外部时才有效。当您双击 div 内的图片时，它不会触发事件。我如何才能使活动双向进行？

html

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

javascript

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

演示 http://jsfiddle.net/9DWrN/

4

3 回答 3

5

检查这个小提琴 http://jsfiddle.net/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)
}​
于 2012-08-18T00:26:39.710 回答
1

您当前的解决方案实际上有效，只是看起来不像，因为您被重定向到新页面。

如果您有 Chrome（也可能是 Firefox，甚至可能是 IE 8+），请双击图像（在新选项卡/窗口中打开）。您的事件仍将被触发。然后，您可以继续对这些事件进行 preventDefault。

但是，使用双击事件并不是防止恶意点击的最佳方法，因为双击事件只会每两次点击引发一次。虽然客户端验证无论如何都不能防止恶意点击，但最好使用点击事件并使用计时器进行检查（即，将事件限制为每 200 毫秒一次的最大值，或者仅在没有先前点击的情况下才允许它在前 200 毫秒内。

于 2012-08-18T00:31:11.137 回答
0

pic.innerHTML在 onclick上改变呢？

见http://jsfiddle.net/4Kecd/

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

即使你删除了链接，到时候也会被跟踪。

请参阅http://jsfiddle.net/4Kecd/1/。

你可以做...

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;
    }
}

...如果您想删除链接但想要图像。

或者您可以禁用链接：

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.');

    }
}

注意：UnLoCo 的解决方案很好，但它的问题是它不会阻止我们点击链接。

相反，您可以在第一次单击时禁用链接并在几秒钟后启用它：

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;
}

在这里看到它：http: //jsfiddle.net/4Kecd/2/

于 2012-08-18T16:34:21.133 回答