div的雙擊事件

Question

我試圖將事件處理程序添加到div中具有圖像的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/

Answer 1

檢查這個小提琴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)
}​

Answer 2

您當前的解決方案實際上可以正常工作，但看起來似乎不可行，因為您已重定向到新頁面。

如果您使用的是Chrome（可能也是Firefox，甚至可能是IE 8+），請在圖像上雙擊鼠標中鍵（在新標簽/窗口中打開）。 您的活動仍然會被解雇。 然后，您可以在這些事件上進行preventDefault。

但是，使用雙擊事件並不是防止惡意點擊的最佳方法，因為雙擊事件只會每兩次單擊引發一次。 盡管客戶端驗證不利於無論如何防止惡意點擊，但最好使用點擊事件並使用計時器進行檢查（例如，將事件限制為每200毫秒最多一次，或者僅在沒有先前點擊的情況下才允許使用）在過去的200毫秒內。

Answer 3

以及如何在onclick上更改pic.innerHTML ？

參見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/