第一次执行一切正常，第二次就不行了。
<style>
.out{width: 508px;background: pink;overflow:hidden;position: absolute;}
.line{width: 500px;height: 100px;background: green;border:4px solid orange;margin:10px 0;position: relative;}
</style>
</head>
<body id="body">
<p id="out" class="out">
<p class="line"></p>
<p class="line"></p>
<p class="line"></p>
<p class="line"></p>
<p class="line"></p>
</p>
<script>
//dom获取id方法
function $(element){return document.getElementById(element);}
//dom获取class方法
function cl(element){return document.getElementsByClassName(element);}
//移动方法
function move(){
cl("line")[2].style.top = event.clientY - thistop + "px";
}
function md(){
thistop = cl("line")[2].getBoundingClientRect().top;
$("out").addEventListener("mousemove",move)
}
function cancelmd(){
$("out").removeEventListener("mousemove",move)
}
cl("line")[2].addEventListener("mousedown",md)
cl("line")[2].addEventListener("mouseup",cancelmd)
</script>
</body>
不是不生效，而是你move函数设计有问题,有时会出现mousedown之后,第三个方块已经脱离了你鼠标的范围,而且由于你的move函数的计算导致鼠标再也无法指到打三个方块了,自然第三个方块的mouseup事件无法触发;
你试试在你觉得不生效的时候,控制台输入