off()方法删除mousedown事件之后, n为什么每次加2, 而不是加1 ?

源自：5-3 卸载事件off()方法

off()方法删除mousedown事件之后, n为什么每次加2, 而不是加1 ?

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left div,
    .right div {
        width: 100%;
        height: 50px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }
    
    .left div {
        background: #bbffaa;
    }
    
    .right div {
        background: yellow;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>删除事件</h2>


    <h4>测试一</h4>
    <div class="left">
        on('mousedown mouseup')
        <div class="aaron">点击触发</div>
    </div>
    <button>点击删除mousedown事件</button>
    <script type="text/javascript">
    var n  = 0;
    //绑定事件
    $(".aaron:first").on('mousedown mouseup', function(e) {
        $(this).text( '触发类型:' +  (e.type) + ",次数" + ++n)
        ++n;
    })

    //删除事件
    $("button:first").click(function() {
        $(".aaron:first").off('mousedown')
    })
   
    </script>



    <h4>测试二</h4>
    <div class="left">
        on('mousedown mouseup')
        <div class="aaron">点击触发</div>
    </div>
    <button>点击销毁所有事件off</button>
    <script type="text/javascript">
    var n  = 0;
    //绑定事件
    $(".aaron:last").on('mousedown mouseup', function(e) {
        $(this).text( '触发类型:' +  (e.type) + ",次数" + ++n)
        ++n;
    })

    //删除事件
    $("button:last").click(function() {
        $(".aaron:last").off()
    })
   
    </script>
</body>

</html>

提问者：AL_Cherish 2016-11-04 16:21

个回答

慕妹7508549

2016-11-04 17:29:44

已采纳

你没有发现你没有删除之前是加4吗？
$(".aaron:first").on('mousedown mouseup', function(e) {
        $(this).text( '触发类型:' +  (e.type) + ",次数" + ++n)
        ++n;
    })
这个地方你做了现两次++n

0

AL_Cherish: 2016-11-04 18:20:08

一. 原本<测试一>的代码是这样的:

    <h4>测试一</h4>
    <div class="left">
        on('mousedown mouseup')
        <div class="aaron">点击触发</div>
    </div>
    <button>点击删除mousedown事件</button>
    <script type="text/javascript">
    var n  = 0;
    //绑定事件
    $(".aaron:first").on('mousedown mouseup', function(e) {
        $(this).text( '触发类型:' +  (e.type) + ",次数" + ++n)
        ++n;
    })

    //删除事件
    $("button:first").click(function() {
        $(".aaron:first").off('mousedown')
    })
   
    </script>

这时运行之后 , 点击"点击删除mousedown事件"的button, 第一次点击这个button, mousedown次数为1, mouseup次数为2, 总次数为3；第二次以后点击这个button, mousedown和mouseup的次数都是加2, 总次数加4;

二. 看了你的第一次回答, 我将++n;删除, 代码为:

    <script type="text/javascript">
    var n  = 0;
    //绑定事件
    $(".aaron:first").on('mousedown mouseup', function(e) {
        $(this).text( '触发类型:' +  (e.type) + ",次数" + ++n)
    })

    //删除事件
    $("button:first").click(function() { 
        $(".aaron:first").off('mousedown')
    })
   
    </script>

这时运行之后 , 点击"点击删除mousedown事件"的button, 点击这个button, mousedown和mouseup的次数都是加1了(这和我之前的试验不太一样, 不过现在明白了.)

三. 非常感谢, 我明白了!!

慕妹7508549

2016-11-04 17:42:49

你先去掉一个试试啊，你看东西仔细点好不好，
$("button:first").click(function() {
$(".aaron:first").off('mousedown')
})
这里只是删了down没有删up啊！
我有点不明白你的意思了！

0