mousedown 및 mouseup 이벤트가 클릭과 같지 않은 경우

나는 잠시 동안 버튼을 사용하여 상대 위치를 사용하여 클릭하면 우울한 효과를 보았고 : : 활성 의사 클래스의 경우 위쪽 : 1 픽셀을 사용했습니다. .mousedown 및 mouseup 이벤트가 클릭과 같지 않은 경우

클릭 이벤트가 발생하지 않고 문제가 발생했으며 동일한 요소에서 mousedown 및 mouseup 이벤트가 발생하지 않았기 때문에 문제가 발생했습니다. 가장 안쪽에있는 요소가 전체 버튼을 덮었는지 확인하기 위해 약간의 손길을 들여서 문제가 남아 있음을 발견했습니다.

텍스트 상단에서 오른쪽을 클릭하면 링크가 아래로 점프 (mousedown 이벤트 발생) 한 다음 백업 (mouseup 이벤트 발생)하지만 클릭이 발생하지 않습니다. 텍스트 중간에서 멋지게 클릭하거나 텍스트에서 정교하게 클릭하면 괜찮습니다.

내가 여기서 생각할 수있는 유일한 점은 textNode가 더 이상 커서 아래에 있지 않은 것처럼 mousedown 이벤트가 textNode에서 시작되고 mouseup이 앵커 요소에서 시작된다는 것입니다. 이벤트 객체를 포착하고 방화 광을 사용하여 타겟을 보면 이것이 사실이 아니라는 것을 나타냅니다. 그러나 나는 다른 설명을 생각할 수 없습니다. 조금만 읽으면 Safari의 textNodes에서 발생하는 이벤트에 대해 언급 할 수 있지만이 불일치에 대해서는 언급하지 않습니다.

다음 스 니펫을 사용하면 문제를 재현 할 수 있습니다. 당신이 바로 텍스트, 또는 픽셀 이상이 상단에 클릭해야합니다, 기억,이 문제는 1 행의 화소 발생 : 인라인 블록을 사용하지 않는, CSS를 만지작

<style> 
a.button-test { 
display: inline-block; 
padding: 20px; 
background: red; 
} 
.button-test:active { 
position: relative; 
top: 1px; 
} 
</style> 
<a class="button-test" href="#">Clickedy click</a>

, 패딩 대신 선 높이를 높이는 것은 여기서 효과가없는 것처럼 보입니다. 나는 많은 조합을 시도했다. 대부분의 테스트는 파이어 폭스에서 수행되어 이벤트에 바인딩하고 방화범을 통해 진행되는 일을 기록하지만 다른 브라우저에서도이 문제가 발생합니다.

다른 사람에게 활발한 도약을 놓치지 않고 제공 할 수있는 영감을 가진 사람이 있습니까? 할 수만 있다면이 효과를 유지하고 싶습니다.

큰 감사,

돔 (의도 웃기)

출처

2010-01-21 dmnc

그것은 당신이 정상에 스타일을 변경하는 경우이 문제를 재현하는 것이 훨씬 더 쉽다 : 여기 10px

출처

2010-01-21 17:55:10 goat

내 해결 방법은 사용자 정의 이벤트를 사용하고 jQuery 사용

var buttonPressed; 
// Track buttonPressed only on button mousedown 
$(document).on('mousedown', 'button', function (e) { 
    // Make sure we store the actual button, not any contained 
    // element we might have clicked instead 
    buttonPressed = $(e.target).closest('button'); 
}); 
// Clear buttonPressed on every mouseup 
$(document).on('mouseup', function (e) { 
    if (buttonPressed) { 
     // Verify it's the same target button 
     var target = $(e.target).closest('button'); 
     if (target.is(buttonPressed)) { 
      buttonPressed.trigger('buttonClick'); 
     } 
     buttonPressed = null; 
    } 
}); 

$('button').on('buttonClick', function (e) { 
    // Do your thing 
});

네이티브 click 및 buttonClick 이벤트를 처리하지 않도록하십시오.

출처

2012-05-31 12:31:28

mousedown 및 mouseup 이벤트가 클릭과 같지 않은 경우

답변

관련 문제