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に進むことができます。

ただし、ダブルクリックイベントは2回のクリックごとにのみスローされるため、ダブルクリックイベントを使用することは悪意のあるクリックを防ぐための最善の方法ではありません。クライアント側の検証はとにかく悪意のあるクリックを防ぐのに悪いですが、クリックイベントを使用してタイマーでチェックするのが最善です（つまり、イベントを最大200ミリ秒に1回に絞るか、前のクリックがなかった場合にのみ許可します）過去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 に答える