jQuery多重事件绑定

1. <a> a标签默认绑定了一个onclick事件,当自己再写一个onclick事件的时候,默认自己写的那个优先执行。

如下程序,先执行(123),然后再发生跳转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a onclick='ClickOn()' href="http://www.oldboyedu.com">走你</a>

    <script>
        function ClickOn(){
            alert(123);
        }
    </script>
</body>
</html>

 2.如果只想让它执行第一步onclick的时候,可以return 一个false回来。

先在此处 onclick='return ClickOn()' 加上return, 再加上return false。。如下黄色标识的2处都需要加上return。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a onclick='return ClickOn()' href="http://www.oldboyedu.com">走你</a>

    <script>
        function ClickOn(){
            alert(123);
            return false;
        }
    </script>
</body>
</html>

 效果,只会弹出123,但不会发生跳转。

如果是return true的话,则2个都会执行。

3. jquery的绑定方式如下:默认先弹出456,再发生跳转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a onclick='return ClickOn()' href="http://www.oldboyedu.com">走你1</a>
    <a id='i1' href="http://www.oldboyedu.com">走你2</a>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function ClickOn(){
            alert(123);
            return false;
        }
        $('#i1').click(function(){
            alert(456);
        })
    </script>
</body>
</html>

用jQuery阻止后续事件的发生,加上只需要加上return false就可以了。在onclick处不需要加上return。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a onclick='return ClickOn()' href="http://www.oldboyedu.com">走你1</a>
    <a id='i1' href="http://www.oldboyedu.com">走你2</a>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function ClickOn(){
            alert(123);
            return false;
        }
        $('#i1').click(function(){
            alert(456);
            return false; //用jQuery阻止后续事件发生的时候,仅此一处加上return就可以了。
        })
    </script>
</body>
</html>

 

posted on 2017-09-03 16:05  momo8238  阅读(340)  评论(0编辑  收藏  举报