off()方法删除mousedown事件之后, n为什么每次加2, 而不是加1 ?
来源：5-3 卸载事件off()方法
AL_Cherish
2016-11-04 16:21
<!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>
写回答
关注
3回答
-
- 慕妹7508549
- 2016-11-04 17:29:44
你没有发现你没有删除之前是加4吗？
$(".aaron:first").on('mousedown mouseup', function(e) {
$(this).text( '触发类型:' + (e.type) + ",次数" + ++n)
++n;
})
这个地方你做了现两次++n
-
- 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啊！
我有点不明白你的意思了！
jQuery基础(三)—事件篇
jQuery第三阶段开启事件修炼，掌握对页面进行交互的操作
89997 学习 · 625 问题
相似问题