javascript - 下面的这段代码为什么阻止不了默认行为呀？

Question

<ul>
        <li>
            <a href="images/1.jpg" title="1" onclick="showPic(this); return false;">1</a>
        </li>
        <li>
            <a href="images/2.jpg" title="2" onclick="showPic(this); return false;">2</a>
        </li>
        <li>
            <a href="images/3.jpg" title="3" onclick="showPic(this);return false;">3</a>
        </li>
        <li>
            <a href="images/4.jpg" title="4" onclick="showPic(this); return false;">4</a>
        </li>
        <li>
            <a href="images/5.jpg" title="5" onclick="showPic(this);return false;">5</a>
        </li>
        <li>
            <a href="images/6.jpg" title="6" onclick="showPic(this);return false;">6</a>
        </li>
    </ul>
    <img id="placeholder" src="images/7.jpg" alt="7">

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

上面的这段代码是body里面的一段，但是为什么当鼠标点击的时候还是会跳转到另外一个页面？我是想让img标签原本里面的图片被替换成鼠标点击的那张图片。

Answer 1

showPic 方法最后一行 placeholer 拼错了！！ 这才是主要原因，别的问题另当别论

补充：return false 其实就是 e.preventDefault()+e.stopPropagation()，不存在兼容性问题，参考 https://css-tricks.com/return...

Answer 2

那可能是你外层有另一个页面的链接，检查层次结构看看

Answer 3

换种写法试试:

<a href="images/1.jpg" title="1" onclick="return showPic(this)">1</a>
js:
function showPic(whichpic){
        var source=whichpic.getAttribute("href");
        var placeholder=document.getElementById("placeholder");
        placeholer.setAttribute("src",source);
        return false
    }

你的方法貌似是没问题的，可能其他地方也有问题
另外既然是取值而已，新增一个data-value的属性取值不行吗？放在href反而麻烦。。

Answer 4

return false;这种阻止默认貌似只能在低版本的IE上用吧。

而且不推荐在dom上写内联的事件。

Answer 5

event.preventDefault：

<ul>
    <li>
        <a href="images/1.jpg" title="1" onclick="showPic(event, this);">1</a>
    </li>
    <li>
        <a href="images/2.jpg" title="2" onclick="showPic(event, this);">2</a>
    </li>
    <li>
        <a href="images/3.jpg" title="3" onclick="showPic(event, this);">3</a>
    </li>
    <li>
        <a href="images/4.jpg" title="4" onclick="showPic(event, this); ">4</a>
    </li>
    <li>
        <a href="images/5.jpg" title="5" onclick="showPic(event, this);">5</a>
    </li>
    <li>
        <a href="images/6.jpg" title="6" onclick="showPic(event, this);">6</a>
    </li>
</ul>
<img id="placeholder" src="images/7.jpg" alt="7">
<script type="text/javascript">
function showPic(ev, whichpic){
    ev.preventDefault();
    var source=whichpic.getAttribute("href");
    var placeholder=document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
}   
</script>