day16-Jquery 事件之阻止事件的发生

一、前言

　　我们在创建<a>标签的时候，添加href超链接属性，点击会自动跳转到你设置的网页，这个是因为在<a>标签内部，自动绑定了一个跳转事件。那接下来我们想阻止此跳转的事件的发生，改如何做呐？

二、dom方式实现

2.1、不阻止事件

①操作html

1
2
3
4
5
6
<body>
    <a onclick="clickOn();" href="http://www.baidu.com">走你</a>
    <script>
        //js代码
    </script>
</body>

②clickOn事件代码

1
2
3
function clickOn(){
    alert(123);
}

效果图：

1、点击 走你 出现alert弹框

 

 2、点击确定->跳转到百度

2.3、阻止跳转

①操作的html

1
2
3
4
5
6
7
<body>
    <!--事件之前 添加 return关键字-->
    <a onclick="return clickOn();" href="http://www.baidu.com">走你</a>
    <script>
          //js代码
    </script>
</body>

②onclick事件

1
2
3
4
function clickOn(){
    alert(123);
    return false;  //如果返回的true，效果跟上面一样
}

效果图：

1、点击走你 -> alert弹框

2、点击确定->不跳转

三、jquery实现

3.1、操作的html

1
2
3
4
5
6
7
<body>
    <a id="i1" href="http://www.baidu.com">走你</a>
    <script src="jquery-1.12.4.js"></script>
    <script>
          //js代码
    </script>
</body>

3.2、阻止事件

1
2
3
4
$("#i1").click(function(){
    alert(456);
    return false; //如果返回true的话，表示不阻止
})

使用场景：

　　登录页面和注册页，当你点击登录的时候，一点，你首先拿到一个表单，一点登录的时候，要把这个表单提交了，但是你输入的用户名、密码不正确，就不能让你提交

posted @ 2018-05-24 14:31  东郭仔  阅读(287)  评论(0)    收藏  举报