国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - return false后a標(biāo)簽還是會跳轉(zhuǎn)?
大家講道理
大家講道理 2017-04-11 12:58:49
0
2
299
<body>
    <p id="main">
        <ul>
            <li><a href="./1.jpg" title="這是圖片一" onclick="showPic(this); return false;">圖片一</a></li>
            <li><a href="./2.jpg" title="這是圖片二" onclick="showPic(this); return false;">圖片二</a></li>
            <li><a href="./3.jpg" title="這是圖片三" onclick="showPic(this); return false;">圖片三</a></li>
        </ul>
        <img id="image" src="" />
        <p id="description"></p>
    </p>
    <script type="text/javascript">
    function showPic(element){
        var image = document.getElementById("image");
        var soure = element.getAttribute("href");
        image.setAttribute("src",soure);

        var text = element.getAttribute("title");
        var description = document.getElementById("description");
        description.firstChild.nodeValue = text;
    }
    </script>
</body>

return false后a標(biāo)簽還是會跳轉(zhuǎn),因?yàn)檫@句:description.firstChild.nodeValue = text; 把它注釋了就不會跳轉(zhuǎn),或者換成:description.innerHTML = text;也不會跳轉(zhuǎn),這是什么情況呢?

還有一個問題是a標(biāo)簽的this默認(rèn)返回的是href屬性的值,比如上面的代碼中,可以直接變成這樣:image.setAttribute("src",element);,不用寫成image.setAttribute("src",element.href);element.getAttribute("href");,是因?yàn)閍標(biāo)簽本來就是必須帶href屬性(正常情況下)所以就自動返回這個值嗎?

大家講道理
大家講道理

光陰似箭催人老,日月如移越少年。

reply all(2)
Peter_Zhu

這個問題很有趣,初看覺得匪夷所思。馬上 COPY 了代碼嘗試了一下:

1.為什么 description.firstChild.nodeValue = text 會導(dǎo)致鏈接跳轉(zhuǎn)?

因?yàn)?description.firstChildnull,也就是一個空對象。你修改 null 的屬性有什么作用?只會導(dǎo)致代碼拋出異常,不繼續(xù)向下執(zhí)行了。既然 JS 不繼續(xù)執(zhí)行了,那么 return false 就是失效的,也就是壓根沒有 return false。所以瀏覽器接著做了點(diǎn)擊 a 標(biāo)簽的默認(rèn)行為,也就是跳轉(zhuǎn)到 href 的鏈接。

為什么 description.innerHTML = text; 沒問題?因?yàn)檫@句 JS 不會導(dǎo)致異常,會正常執(zhí)行下去,直到 return false。

2.為什么 setAttribute 時,element 等價于 element.getAttribute("href")?

如果你把 element.toString() 的結(jié)果打印出來就知道了,就是 href 的值。所以 setAttribute 的第二個參數(shù)會進(jìn)行一次 toString 處理,確保值會是一個字符串對象,然后再賦值給相應(yīng)屬性。

再次不得不說,你這個問題提得很有價值,我自己也學(xué)到了。

劉奇

開發(fā)前端請時時刻刻打開你的F12

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template