0

ユーザーが別のページに移動しなくても、あるページから移動できる動的なJavaScript画像ギャラリーを作成しようとしています。

function showPic(whichPic) { 
    var source = whichpic.getAttribute("href");  
    var placeholder = document.getElementById("placeholder"); 
    placeholder.setAttribute("src",source); 
}

showPicイベントハンドラーを使用して関数を呼び出そうとしてonlickいますが、ユーザーをリンクの宛先に移動させる要素のデフォルトの動作も防止しています。イベントハンドラーにreturn false含まれるJavaScriptにステートメントを追加することで、この機能を利用できると思いました。onclick動作していないようで、理由がわかりません。

これが私のHTMLマークアップです：

<h1>Breaking Bad Characters</h1>
<ul>
    <li>
        <a href="images/tuco.jpg" onclick="showPic(this); return false;" title="Tuco">Tuco Salamanca</a>
    </li>
    <li>
        <a href="images/walt.jpg" onclick="showPic(this); return false;" title="Walt">Walter White</a>
    </li>
    <li>
        <a href="images/gus.jpg" onclick="showPic(this); return false;" title="Gustavo">Gustavo Fring</a>
    </li>
    <li>
        <a href="images/saul.jpg" onclick="showPic(this); return false;" title="Saul">Saul Goodman</a>
    </li>
    <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
</ul>

作品へのリンクも提供できます。

http://the-session.co.uk/JSgallery/

4

3 に答える 3

0

あなたのソリューション（を使用return false）はIEに適しているはずであり、ロイドのソリューション（を使用event.preventDefault()）は他のブラウザでも機能するはずです。

すべてのブラウザーで機能するには、jQueryのようなライブラリーを使用できます。このライブラリーは、preventDefault() メソッド内のクロスブラウザーの問題を処理します。

ライブラリを使用したくない場合は、イベントを呼び出す前に、イベントにpreventDefaultメソッドがあるかどうかをテストできます。

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

関数showPicで最も簡単な方法

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();
    }
    else {
        return false;
    }
}
于 2013-01-25T14:21:02.920 に答える
0

を呼び出して、デフォルトが発生しないようにする必要がありますevent.preventDefault()。

function showPic(el) { 
    event.preventDefault();

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

<ul>
    <li>
        <a href="images/tuco.jpg" onclick="showPic(this)" title="Tuco">Tuco Salamanca</a>
    </li>
    <li>
        <a href="images/walt.jpg" onclick="showPic(this)" title="Walt">Walter White</a>
    </li>
    <li>
        <a href="images/gus.jpg" onclick="showPic(this)" title="Gustavo">Gustavo Fring</a>
    </li>
    <li>
        <a href="images/saul.jpg" onclick="showPic(this)" title="Saul">Saul Goodman</a>
    </li>
    <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
</ul>

MDN のこちらを参照してください - https://developer.mozilla.org/en/docs/DOM/event.preventDefault

JSFiddle でこれを試すこともできます - http://jsfiddle.net/GuDeA/

于 2013-01-25T14:09:31.260 に答える