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

Question

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

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

我试图调用​​功能与onlick事件处理程序，同时防止这需要用户对链接的目标元素的默认行为。我认为通过将return false声明添加到onclick事件处理程序包含的JavaScript中，我可以获得此功能。它似乎没有工作，我不明白为什么。

这里是我的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/

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和劳氏溶液（使用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; 
    } 
}