a链接易混淆用法详解

Posted 2020-08-13 web全端小屋

链接可以说遍布互联网，比如你想提供一个可以跳转到百度首页的链接给网友，那么代码如下:

<a href="http://www.baidu.com">百度一下,你就知道</a>

而如果这个链接指向的网址你想在浏览器中的新窗口中打开，那么代码如下:

<a href="http://www.baidu.com" target="_blank">百度一下,你就知道</a>

那如果我页面中有一堆的a链接都想在新窗口中打开呢？难道得为一个个链接添加 target="_blank" ？其实只需在页面中插入一个base标签就可以实现了，base标签一般是放到网页的head标签里面，base标签的代码如下:

<base target="_blank" />

下面区分下a链接容易混淆的知识点:

<a href="">这是一个空链接</a>
<a href="#">这是一个#链接</a>
<a href="javascript:;">这是一个‘javascript:;‘链接</a>

这三种其实是有区别的，第一种空链接点击后会刷新页面，而后面两种写法点击后不会刷新页面；

但是但是但是，第二种写法#链接其实还有一个独特的用法，比如以下代码:

<a href="#foot">这是一个#链接</a>
...
.此处省略很多页面内容.
...
<footer id="foot">
        这是页面底部
</footer>

如果一个页面内容很长，我们想在页面头部设置一个链接方便用户点击后直接跳转到当前页面的底部浏览就可以使用上面的写法来实现了，注意 href="#foot"  与  id="foot"  中的foot必须一致否则无效。

 

 下面来个问题：

<a href="javascript:alert(‘这是href弹出的‘);" onclick = "javascript:alert(‘这是onclick弹出的‘);">这是一个链接</a>

你觉得哪个的js代码会执行呢？ 其实onclick的alert会先被执行。

注意onclick的‘javascript:‘可以省略不写,而href属性执行js代码时的‘javascript:‘不能省略。

下面来谈谈a链接调用函数易混淆的地方:

    <a href="javascript:fnHref();" onclick = "fnLink()">这是链接一</a>

    <a href="javascript:fnHref();" onclick = "return fnLink()">这是链接二</a>

    <a href="javascript:fnHref();" onclick = "return false;fnLink()">这是链接三</a>

    <a href="javascript:;" onclick = "fnLink()">这是链接四</a>

    <a href="#" onclick = "fnLink()">这是链接五</a>
    <script>
        function fnHref(){
            alert(1);
        }

        function fnLink(){
            alert(2);
        }
    </script>

上面的script代码段其实写到a链接的前面或后面都可以正常运行，因为js有 预解析机制。

链接一点击后:先弹2后弹1

链接二点击后:先弹2后弹1

链接三点击后:onclick事件触发后直接return false(程序返回假),后面的代码统统不执行,所以啥也没弹

链接四点击后:弹2然后没有然后了

链接五点击后:弹2然后没有然后了，其实链接五与链接四效果一模一样。

 

举一反三:其实form表单中的action(类似a链接里面的href)与onsubmit(类似onclick)写法类似。

    <form action="#" method="get" id="myform1" onsubmit="checkForm()">
        <label>用户名:</label>
        <input type="text" placeholder="请输入用户名" name="username" />
        <label>密码:</label>
        <input type="password" name="pw" />
        <input type="submit" value="注册" name="sub" />
    </form>
    <script>
        function checkForm(){ /*当submit按钮被点击时会触发此函数*/
            if(myform1.username.value == ‘‘) {
                alert(‘用户名不能为空‘);
            }
        }
    </script>