                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础(三)—事件篇

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

源自：jQuery基础(三)—事件篇 5-3

关注问题我要回答

2226

操作

收起

3 回答

慕妹7508549 回答被采纳 +3 积分
2016-11-04

你没有发现你没有删除之前是加4吗？

$(".aaron:first").on('mousedown mouseup', function(e) {

$(this).text( '触发类型:' + (e.type) + ",次数" + ++n)

++n;

})

这个地方你做了现两次++n

0 回复有任何疑惑可以回复我~

收起回答

慕妹7508549 回复 AL_Cherish 提问者

没删之前做了一个down的动作，做了一个up的东西，结果是双，删掉一个down之后，就只做一个up了，这个函数只被调用了一次，结果是单

2016-11-04 回复有任何疑惑可以回复我~

慕妹7508549 回复 AL_Cherish 提问者

他加在一个动作里是加了一个1又加了一个1也好，还是只加了一个1，都是一个道理，双加删除之前是+4之后是加2 单加的话删除之前加2删除之后加1

2016-11-04 回复有任何疑惑可以回复我~

AL_Cherish 提问者
2016-11-04

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

    <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了(这和我之前的试验不太一样, 不过现在明白了.)

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

0 回复有任何疑惑可以回复我~

收起回答

慕妹7508549

他起始阶段是从0开始的，如果是3你可以把他当做4,

2016-11-04 回复有任何疑惑可以回复我~