Question

我一直在尝试创建一个动态JavaScript图片库，可以从一个页面导航，而无需用户导航到另一个页面。

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

我正在尝试使用showPic事件处理程序调用{{1}}函数，同时还会阻止将用户带到链接目标的元素的默认行为。我认为通过向onlick事件处理程序包含的JavaScript添加return false语句，我可以获得此功能。它似乎没有用，我无法理解为什么。

这是我的HTML标记：

onclick

我还可以提供工作链接：

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

Answer 1

您需要通过调用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/

Answer 2

您的解决方案（使用return false）应该适用于IE，Lloyd的解决方案（使用event.preventDefault()）应适用于其他浏览器。

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

如果您不想使用库，那么您可以在调用之前测试该事件是否具有preventDefault方法：

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

Answer 3

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;
    }
}

使用事件处理程序调用函数，同时防止默认行为

3 个答案: