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，而 Lloyd 的解决方案（使用event.preventDefault()）应该适用于其他浏览器。

preventDefault() 要在所有浏览器中工作，您可以使用像 jQuery 这样的库，它在其方法中处理跨浏览器问题。

如果您不想使用库，则可以在调用之前测试事件是否具有 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 回答