0

jQuery のような JavaScript ライブラリを使用せずに、動的画像ギャラリーのデフォルト アクションを防止しようとしています。ここにプロジェクトがあります - http://the-session.co.uk/JSgallery/私もそれらを望んでいないのに、リンクがまだユーザーをリンク先に連れて行っているようです。onclick関数を呼び出すために、HTML マークアップでインライン イベント ハンドラーを使用しています。

<a href="images/tuco.jpg" onclick="showPic(this)" title="Tuco">Tuco Salamanca</a>

関数：

function showPic(whichpic) { 

    var source = whichpic.getAttribute("href");  
    var placeholder = document.getElementById("placeholder"); 
    placeholder.setAttribute("src",source); 

    var event = window.event;
    if(event.preventDefault) {
        event.preventDefault(); // handles most browsers
    }
    else {
        return false;          // handles ie
    }
}

このエラーは、マウスがクリックされると、コンソールに一瞬表示されます。

ここに画像の説明を入力

上記の行で確実にイベントが定義されていvar event = window.event;ます。問題を解決するための提案はありますか?

4

5 に答える 5

2

オブジェクトwindow.eventは Internet Explorer にのみ存在し、他のブラウザーには存在しません。

他のブラウザーでは、イベントは、イベントを処理する関数にパラメーターとして渡されます。

あなたが本当に欲しいのは次のようなものです：

<a href="images/tuco.jpg" onclick="showPic(event)" title="Tuco">Tuco Salamanca</a>

と

function showPic(e) { 

    if (!e) var e = window.event;

    var whichpic = e.target

    var source = whichpic.getAttribute("href");  
    var placeholder = document.getElementById("placeholder"); 
    placeholder.setAttribute("src",source); 

    if(e.preventDefault) {
        e.preventDefault(); // handles most browsers
    }
    else {
        return false;          // handles ie
    }
}

Quirks Modeには優れた概要があります。

FWIW: イベント処理の正規化は、JavaScript ライブラリまたはフレームワークを使用する最大の利点の 1 つです。jQuery、Dojo、Prototype などを見てみましょう。

于 2013-01-25T15:57:37.487 に答える
1

で使用する場合onclickはhref、 でアクションを実行する必要があります。そうしないとreturn false;、アクションが完了hrefすると が実行されます。onclick

イベントを使用してインライン化する代わりに、にonclick基づく JavaScript のイベント処理を使用することを検討してくださいid。jQuery などのライブラリを使用することを強くお勧めします。イベント処理は簡単です...

$('#someid').click(function() { alert('hi') });

ネイティブ JavaScript を使用しても、HTML を散らかすよりもはるかに優れた方法onclickです...

document.getElementById('someid').click = function() {
    alert('hi');
}
于 2013-01-25T15:54:40.533 に答える
0

これを試して：

<a href="images/tuco.jpg" onclick="showPic(event,this)" title="Tuco">Tuco Salamanca</a>

と：

function showPic(event, whichpic) { 

    var source = whichpic.getAttribute("href");  
    var placeholder = document.getElementById("placeholder"); 
    placeholder.setAttribute("src",source); 

    if(event.preventDefault) {
        event.preventDefault(); // handles most browsers
    }
    else {
        return false;          // handles ie
    }
}
于 2013-01-25T15:56:46.073 に答える
0

window.event はおそらく未定義であるため、変数が未定義です。この質問が問題の解決に役立つかどうかを確認してください:なぜ FF は window.event が未定義であると言うのですか? (イベントリスナーを追加して関数を呼び出す)

于 2013-01-25T15:56:57.820 に答える
0

私は同様の問題を楽しんでおり、この解決策が機能することがわかりました:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
</head>
<body>
<a id="mylink" href="http://www.stackoverflow.com/" target="_blank">Go to SO.</a>
<script>
var linkClicked = false;

window.onload = function()
{
    document.getElementById("mylink").onclick = function(e)
    {

        if (!e) var e = window.event;
        if (!linkClicked)
        {
            linkClicked = true;
            // Add code to change appearance of link so that people will know not to click it.

        }
        else
        {

                if(e.preventDefault) 
                {
                    e.preventDefault(); // handles most browsers
                }
                else
                {
                    return false;          // handles ie
                }
        }   
    }
}    
</script>

</body>
</html>

この例では、リンクが機能し、新しいウィンドウが 1 回開きます。それ以降のすべてのクリックは効果がありません。

リンクが機能しなくなったことを明確にするために、スタイルを追加することをお勧めします。

私はダンクラムの答えから助けを得たので、これが好きなら、それも好きです!

于 2013-05-09T10:28:58.863 に答える