关于jQuery中mousedown和mouseup事件响应的问题解决

来源：动视网责编：小采时间：2020-11-27 20:17:59

关于jQuery中mousedown和mouseup事件响应的问题解决

关于jQuery中mousedown和mouseup事件响应的问题解决:最近在做一个网页的音乐播放器播放列表什么的都完成了,只剩最后一个进度条滑块的拖动效果了,我的思路是这样的:由$("#pulley").mousedown事件给这个控件bind一个mousemove事件然后在mouseup的时候将mousemove事件解绑,但是事件的触发总

推荐度：

点击下载本文 文档为doc格式

导读关于jQuery中mousedown和mouseup事件响应的问题解决:最近在做一个网页的音乐播放器播放列表什么的都完成了,只剩最后一个进度条滑块的拖动效果了,我的思路是这样的:由$("#pulley").mousedown事件给这个控件bind一个mousemove事件然后在mouseup的时候将mousemove事件解绑,但是事件的触发总

最近在做一个网页的音乐播放器播放列表什么的都完成了,只剩最后一个进度条滑块的拖动效果了,我的思路是这样的:
由$("#pulley").mousedown事件给这个控件bind一个mousemove事件然后在mouseup的时候将mousemove事件解绑,但是事件的触发总是时灵时不灵的苦恼中 ..上代码

 $("#pulley").mousedown(function(){
 $("#pulley").bind("mousemove", function(e){
 $("#debug").text("start");
 setschdule(e);
 });
 });
 $("*").mouseup(function(){
 $("#pulley").unbind("mousemove");
 $("#debug").text("test");
 });

该元素mousedown的是应该给document或者body绑定mousemove事件，mouseup也应该绑定在document或者body上

试过了 mouseleave事件是指鼠标移开该控件时触发.. 和我的概念不一样

$("#pulley").mousedown(function () {
 //此处绑定document
 $(document).bind("mousemove", function (e) {
 $("#debug").text("start");
 setschdule(e);
 });
});
$(document).mouseup(function () {
 //同上
 $(document).unbind("mousemove");
 $("#debug").text("test");
});

我的意思是这样，mousemove不绑在页面里万一手抖移出元素外事件不就停了

 
$("#pulley").mousedown(function(){
 $(document).bind("mousemove", function(e){
 $("#debug").text("start");
 setschdule(e);
 });
 });
 $(document).mouseup(function(){
 $("#pulley").unbind("mousemove");
 $("#debug").text("close");
 });

试过了好像不可以后面document解绑不了事件然后滑块就停不下来了

解绑应该是$(document).unbind("mousemove");

原生的拖动你可能考虑些这样的代码

oDiv2.onmousedown = function(ev){
 var ev = ev || window.event;
 disY = ev.clientY - oDiv2.offsetTop;
 
 document.onmousemove = function(ev){
 var ev = ev || window.event;
 
 var T = ev.clientY - disY;
 
 scrollBar(T);
 
 };
 document.onmouseup = function(){
 document.onmousemove = null;
 document.onmouseup = null;
 };
 return false;
 };

我感觉需要考虑两点需要考虑，
1、第一鼠标移出目标区域，
如果浏览器不支持drag事件，应该考虑mouseleave事件，因为如果光标移出了目标区域，也就无法监控到mouseup事件了
2、浏览器支持drag事件，
我测试（chrome 53，对不起，我不知道由其它的浏览器）后发现，在mousedown事件触发之后，只要鼠标移动就会触发drag事件，不管鼠标移动到哪里，只要松开鼠标按键，就会触发dragend事件

总结：如果浏览器支持drag事件，那么直接使用drag事件，如果不支持的话，就得用同时写四个事件监听器了。

关于jQuery中mousedown和mouseup事件响应的问题解决

推荐度：

点击下载本文 文档为doc格式

标签：解决事件 jQuery

热门焦点

关于jQuery中mousedown和mouseup事件响应的问题解决

关于jQuery中mousedown和mouseup事件响应的问题解决

关于jQuery中mousedown和mouseup事件响应的问题解决

最新推荐

猜你喜欢

热门推荐