mousemove가 이전에 호출 된 경우 jquery가 마우스 업을 방지합니다.

Question

span 버튼이 가로로 표시된 div이 있습니다. 화면에 너무 많은 버튼이있어서 버튼 전체를 클릭하여 드래그 할 수 있기를 바랍니다. 그러나 행을 드래그하면 버튼의 mouseup 이벤트가 발생하지 않게하려고합니다.

holder에는 button 요소 만 포함됩니다. 다음은 ASCII 표현입니다.

------------------------------- 
| btn | btn | btn | btn | btn | 
------------------------------- 

다음은 코드 설정입니다. 현재 버튼의 mouseup 핸들러가 핸들러 (핸들러가 버블 링 단계에서 호출되기 전에) 전에 호출되기 때문에 홀더 mouseup 핸들러에서 event.preventPropagation()을 호출해도 도움이되지 않습니다.

<div id="holder"> 
    <span class="button"></span> 
</div> 

$('#holder').mousedown(function() { 
    $(document).mousemove(function() { 
     // scroll content of #holder 
    }).mouseup(function() { 
     // stop scrolling 
     $(document).unbind('mouseup').unbind('mousemove'); 
    }); 
}); 

$('.button').mouseup(function() { 
    $('document').mousemove(function() { 
     // do some action here, but only if holder hasn't scrolled on mousedown 
    }); 
}); 

어떤 아이디어가?

Answer 1

그냥이 같은 흐름, 뭔가 제어하는 ​​전역 변수를 사용하지 이유 : 나는 물론`스크롤 = FALSE '에서 설정해야 할 것입니다 :)

내가 생각

var scrolled = false; 

$('#holder').mousedown(function() { 
    $(document).mousemove(function() { 
     scrolled = true; 
     // scroll content of #holder 

    }).mouseup(function() { 
     // stop scrolling 
     $(document).unbind('mouseup').unbind('mousemove'); 
    }); 
}); 

$('.button').mouseup(function() { 
    $('document').mousemove(function() { 
     if (scrolled == false) { 
      // do some action here, but only if holder hasn't scrolled on mousedown 
     } 
    }); 
});