zoukankan      html  css  js  c++  java
  • a标签的herf和click事件

    在动态网页中,常常需要在单击超链接时处理一些数据,而不是跳转一个网页。在这种情况下,通常有以下三种处理方式:

    不设置<a>标签的href属性,只设置onclick属性。在这种处理方式下,通常超链接文本会和正文的文本以相同的形式出现,即不 会有默认的下划线。当鼠标放在超链接上也不会显示小手的形状(除非为该超链接设置了CSS)。因此,用户很难知道这是一个可以点击的超链接。

    将<a>标签的href属性值设置为"#",并设置onclick属性。在这种处理方式下,用户可以很明显地看出哪些文字是超链接。在 单击该超链接时,也可以执行onclick属性值中的JavaScript语句,并且不会跳转网页。但是,由于href的属性值为"#",浏览器会自动跳 转到当前网页的顶部。如果当前网页内容比较多,浏览器窗口出现下拉滚动条时,可以很明显地看到跳转,而这种跳转往往不是网页设计者的          本意。

    在没有为<a>标签设置onclick属性时,如果单击了该超链接,浏览器会加载href属性中的URL。如果href属性值并不是一 个URL,而是一个JavaScript语句的话,那么浏览器就会执行该语句。因此,可以直接将JavaScript语句写在<a>标签的 href属性值中,让href属性代替onclick属性。在这种处理方式下,既可以响应click事件,又可以不让网页跳转。

    在<a>标签的href属性值中添加JavaScript语句之前,必须要先使用"javascript:"语句来声明href属性值中的语句为JavaScript语句。否则,浏览器会将href属性值中的JavaScript语句当成是URL进行加载

    <html>
    <head>
    <title>在超链接中使用事件</title>
    <metahttp-equiv="content-type"content="text/html;charset=gb2312">
    <scripttype="text/javascript"language="javascript">
    <!--
    //多添加几个换行,让效果明显
    for(var i=0;i<100;i++)
    {
    document.write("<br>");
    }
    -->
    </script>
    </head>
    <body>
    <aonclick="alert('您单击了第二个超链接')">第1个超链接</a><br>
    <ahref="http://blog.163.com/alaskan_hu/blog/#"onclick="alert('您单击了第二个超链接')">第2个超链接</a>
    <br>
    <ahref="javascript:alert('您单击了第三个超链接')">第3个超链接</a>
    <br>
    </body>
    </html>

     

    在本例中创建了3个超链接,这3个超链接的处理方式如下所示:

    第1个超链接中,没有设置href属性,因此,从图12-11中看起来好像只是一行文字,并且鼠标放在上面的时候,也不会显示小手的形状。因此,很 难让用户知道这是一个可以点击的超链接。但是如果用户单击了该超链接,会弹出一个警告框,而且单击警告框中的【确定】按钮之后,不会跳转到任何URL上。

    第2个超链接中,href属性值为"#",如果单击该超链接,先会执行onclick属性值中的JavaScript,弹出一个警告框。在单击警告框中的【确定】按钮之后,浏览器会自动跳转到当前网页的顶部。

    第3个超链接中,直接将JavaScript语句写在href属性值中。在单击该超链接时,可以执行href属性值中的JavaScript语句,而且不会有任何跳转。

     

    由于onclick先于herf执行,所以可以利用这个执行顺序,实现页面迁移的控制,即满足一定条件的情况下才迁移页面。

    把上面代码修改成如下代码。onclick中调用的判断方法必须返回true/false,同时必须用return把该判断方法的返回值

    传给为onclick事件,这样当判断方法返回false时(即onclick="javascript:return false"), 则herf不执行,页面就

    不进行迁移;若判断方法返回true,则herf执行,页面进行迁移。若onclick中的判断方法前不加return,则无法控制

    herf的执行,无论判断方法返回true或false,herf都执行迁移页面。

  • 相关阅读:
    169_Majority Element
    171_Excel Sheet Column Number
    217_Contains Duplicate
    242_Valid Anagram
    【findIndex】根据数组对象某一元素的id,找到此元素在数组所在的位置
    【鼠标右击组件】v-contextmenu
    【 拖拽组件】基于 Sortable.js 的 Vue 拖拽组件。 访问地址:Vue.Draggable
    【vue-markdown编辑器】vue-markdown 组件github地址
    mac下如何制作windows启动盘
    【vue webstorm】WebStorm Vue代码格式错误
  • 原文地址:https://www.cnblogs.com/zbx123/p/3495300.html
Copyright © 2011-2022 走看看