2012-11-10 4 views
0

나는 이미지의 목록 인 내 div "앨범"중 하나에서 드래그 앤 스크롤하려고합니다. 여기 jquery 마우스 이벤트가 충돌합니까?

내가 무슨 짓을했는지

$(album).on({ 
    mousedown:function(){ 
     console.log('mousedown'); 
     $(album).on('mousemove', function(){ 
      console.log('mousemove') 
     }) 
    } 

    mouseup:function(){ 
     console.log('mouseup'); 
     $(album).off('mousemove'); 
    } 

}) 
여기에서 일어나고있는 것은 아래로 마우스, 그것은 였다면 'mousemove'을 밖으로 추적합니다 후 약 4 다음 5 번 추적을 중지 할 것이며, 좀 더 활동 아이콘이 나타났다 없다는 것입니다

클릭 한 이미지가 투명한 버전으로 표시됩니다. 그런 다음 여기에 마우스를 놓으면 '마우스 업'을 추적하지 않습니다. 하지만 div를 클릭하고 마우스를 움직이지 않으면 'mouseup'이 추적됩니다.

왜 콘솔에서 마우스 이동 추적을 계속하지 않고 왜 마우스 업을 추적하지 않았습니까? 감사.

+0

나는 완벽하게 작동하는 예제를 가지고 있습니다. – VIDesignz

+0

이 남자와 행운이 있습니까? – VIDesignz

+0

나는 이론을 가지고있다. 위의 코드에서 오류는 click 이벤트가 한 번만 발생하고 mousemove에서 지속 상태를 원한다는 사실 때문이다. VIDesign은 click 이벤트의 기본 동작을 방지하여이 문제를 해결했으며 mousemove 이벤트에 대한 종속성을 만들어 해결했습니다. 당신이 선호하는 대답은 당신에게 달려 있습니다. –

답변

1

여기에 사람이 있습니다! 완전한!!

근무 Fiddle

HTML

<div class='album'></div> 

JQuery와

$('body').on('mousedown', '.album', function(e){ 
    e.preventDefault(); 
    console.log('mousedown'); 

    $(this).on('mousemove', function(){ 
     console.log('mousemove'); 
    }); 

    $(this).on('mouseup', function(){ 
     $(this).off('mousemove'); 
     console.log('mouseup'); 
    }); 

}); 
+0

정말 고마워요! 하지만이 작업을 수행하기 위해 기본 작업을 방지해야하는 이유는 무엇입니까? – shibbydoo

+0

@shibbydoo 환영합니다 !! 나는 확실히 말할 수 없다 ... 원본을 테스트했을 때, 다른 모든 mousedown에 mousemove 로그를 얻고 있었으므로 mousedown/mouseup에서 표준 클릭 기능으로 인한 간섭이 있다고 가정합니다. 이것은 단지 추측입니다. 우리가 모든 마우스 이벤트를 로깅하여 서로 진정으로 어떻게 반응하는지 알아낼 수있을 것입니다. 그러나 지금 당장은 '이걸 가지고 얻을 수있는 것을 가져 가라.'라고 말할 것입니다! :) – VIDesignz

0

우리는 다른 방법으로 그것에 대해 이동하는 경우 :

,388,

중첩 이벤트는 의미가있는 것처럼 보이지만 설명 된 문제에 부딪 힐 수 있습니다. 왜 내가 당신을 위해 일하지 않는지에 관한 이론을 듣고 싶습니다.

+0

우리가 클릭 동작에서 기본값을 막는다면 클린업하는 것 같습니다. 위의 답을 무시했을 때 처음 클릭, 드래그, 해제 할 때 효과가 있었지만 기능이 어떻게 든 뒤집 혔습니다. 클릭하면 작동하지 않지만 버튼을 누르지 않고 마우스를 움직이면 마우스 이동이 등록됩니다. 왜 비록 그 이유를 설명 할 수는 없습니다. – VIDesignz

+0

나는 우리의 답변을 모두 테스트했으며 각 질문이 효과가있는 것으로 보인다. 우리는 어떤 대답을 받아 들여야하는지보기 위해 시험을 봐야 할 것입니다. –

관련 문제