在阻止默认行为的同时使用事件处理程序调用函数

Question

I have been trying to create a dynamic JavaScript image gallery that can be navigated from one page, without the need for the user to navigate to another page.

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

I am trying to invoke the showPic function with the onlick event handler, while also preventing the default behavior of the element that takes the user to the destination of the link. I thought that by adding a return false statement to to the JavaScript contained by the onclick event handler I could get this functionality. It seems not to be working and I cannot understand why.

Here is my HTML markup:

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

I can also provide a link to the work:

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

Answer 1

You'll need to prevent the default from happening by calling 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>

See here on MDN - https://developer.mozilla.org/en/docs/DOM/event.preventDefault

You can also play with this on JSFiddle - http://jsfiddle.net/GuDeA/

Answer 2

Your solution (using return false ) should be fine for IE, and Lloyd's solution (using event.preventDefault() ) should work for other browsers.

To work in all browsers, you could use a library like jQuery, which handles the cross-browser issues in it's preventDefault() method .

If you don't want to use a library, then you could test whether the event has a preventDefault method before calling it:

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

Answer 3

the easiest way in function 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;
    }
}