zoukankan      html  css  js  c++  java
  • 链接被点击的默认行为——带到另一个窗口

    图片链接被点击时,默认会被带到图片查看窗口。

    在给某个元素添加了事件处理函数后,一旦事件发生,相应的JavaScript代码就会得到执行。被调用的javascript函数可以返回一个值,这个值将被传递给那个事件处理函数。

    以onclick为例,链接被点击时,

    如果javascript代码返回的值是true,onclick事件处理函数就认为“这个链接被点击了。”
    如果javascript代码返回的值是false,onclick事件处理函数就认为“这个链接没有被点击”。 

    代码示例:

    <li><a href="images/0903.jpg_wh300.jpg" title="a pink pig" onclick="showPic(this); ">小猪</a></li>
    <li><a href="images/8046.jpg_wh300.jpg" title="a piece of pork" onclick="showPic(this); ">猪肉</a></li>
    <li><a href="images/8503.jpg_wh300.jpg" title="a ship in lamp" onclick="showPic(this) ;">小船</a></li>
    <li><a href="images/9840.jpg_wh300.jpg" title="flowers" onclick="showPic(this); ">花朵</a></li>
    <li><a href="http://www.cnblogs.com/" title="flowers" onclick="return false;" >我是小可爱</a></li>
    </ul>
    <img id="placeholder" src="images/9840.jpg_wh300.jpg" alt="花朵占位符" >
    <p id="description">choose a picture</p>

    效果图展示:

    点击”小猪“后效果如下图

    代码示例:
    加上"return false"

    <ul>
    <li><a href="images/0903.jpg_wh300.jpg" title="a pink pig" onclick="showPic(this); return false;">小猪</a></li>
    <li><a href="images/8046.jpg_wh300.jpg" title="a piece of pork" onclick="showPic(this); return false;">猪肉</a></li>
    <li><a href="images/8503.jpg_wh300.jpg" title="a ship in lamp" onclick="showPic(this) ;return false;">小船</a></li>
    <li><a href="images/9840.jpg_wh300.jpg" title="flowers" onclick="showPic(this); return false;">花朵</a></li>
    <li><a href="http://www.cnblogs.com/" title="flowers" onclick="return false;" >我是小可爱</a></li>
    </ul>
    <img id="placeholder" src="images/9840.jpg_wh300.jpg" alt="花朵占位符" >
    <p id="description">choose a picture</p>

    点击“小猪”,效果图如下:

    在javascript代码中增加一条return false 语句,就可以防止用户被带到目标链接窗口。
  • 相关阅读:
    【linux基础】usleep和sleep的区别
    【算法基础】opencv函数approxPolyDP和Ramer-Douglas-Peucker Algorithm
    【算法基础】散点轮廓算法-Alpha Shapes
    【图像处理算法基础】图像分割经典算法-泛洪算法FloodFill
    .net core 部署在Linux系统上运行的环境搭建
    Linux部署Net Core网站,三种自定义绑定端口号的方法(UseUrls,UseKestrel,手动指定)
    .NetCore部署Linux环境搭建
    .Net Core 项目发布到Linux
    .Net Core 项目发布到Linux
    Linux桌面操作系统排行榜
  • 原文地址:https://www.cnblogs.com/Wei-Yuan/p/Wei_Yuan.html
Copyright © 2011-2022 走看看