2009-12-18 4 views
9

배경 : 표 요소를 클릭 앤 드래그하여 whenisgood.net을 연상시키는 표를 생성합니다. 왼쪽, 가운데 및 오른쪽 마우스 버튼이 mousedown 이벤트를 활성화 할 때 다른 유형의 토글 코드를 호출하려고합니다.자바 스크립트로 중간 클릭 스크롤을 사용 중지합니다.

JQuery를 사용하면 좋은 출발을 할 수 있습니다. toggle() 기능에

$(".togglable").bind("contextmenu", function() {return false;}); 
$(".togglable").bind("mousedown", function(e){ 
    e.preventDefault(); 
    toggle(this, e); 
}); 

내가 클릭 한 어떤 버튼을 결정하기 위해 e.which를 사용할 수 있습니다.

punchline : 나는 e.preventDefault()를 사용하여 스크롤의 중간 클릭 기본 동작을 멈추기를 바랬다. 그렇지 않았습니다. 스크롤 동작이 활성화되지 않도록하려면 어떻게해야합니까?

는 있지만 IE, 웹킷, 그리고 Konquerer에서, 또한 "Triggering onclick event using middle click"

답변

3

현재 내 솔루션이 있습니다 : (! 더 JQuery와) (jquery wrap를 통해) 링크에 포장하여

$(".togglable").wrap(
    "<a href='javascript:void(0);' 
    onclick='return false;'></a>" 
); 

, 브라우저는 링크의 생각하더라도, 중간 클릭에 스크롤되지 않습니다 마우스를 드래그하면됩니다. 이 설정과 내 상황에는 몇 가지 (사소한) 결함이 있습니다.

중간 탭을 클릭하면 드래그하지 않고 Firefox가 새 탭을 엽니 다. 오페라는 당신이 가운데 클릭하거나 드래그 할 때 새로운 탭을 열 것입니다. 그래서 href='#' 대신 href='javascript:void(0);'을 사용했습니다. 클라이언트 브라우저가 전체 페이지를로드하지 않고 이상한 URL이있는 빈 페이지 만로드합니다.

하지만이 솔루션은 Chrome 및 Safari의 매력처럼 작동합니다. 그것은 IE8에서 잘 작동합니다. 단, 포인터를 "can not do"심볼로 바꿉니다. 링크를 어딘가에 드래그하려고한다고 생각하기 때문에, 이제 포인터를 "left-click-n-drag"할 때마다 바꿉니다. IE의 이전 버전에서는 테스트되지 않았습니다.

12

Middle-click can be disabled with Javascript 참조하십시오. Firefox에는 구성 파일 편집이 필요합니다. 그것은 2017이고 파이어 폭스 50은 이것을 지원합니다.

+5

한 것은 단지 재미였습니다. – czarchaic

+0

+1 좋은 링크 : 정보 가득. 현재의 솔루션에 영감을 주었던 것은 테스트 페이지 (http://unixpapa.com/js/testmouse.html)였습니다. –

2

이미 약간 오래된 스레드이지만 Firefox에서이 문제를 피하려고 노력했습니다. (여전히 3.6을 사용하고 있습니다.) 결과를 공유 할 것이고 누군가 도움이 될 것입니다.

빈 HTML 파일 (또는 단락 몇 개의 작은 문서)을 만들고 Firefox에서로드하면 중간 클릭 스크롤 막대가 나타나지 않는지 확인하십시오. 이는 <body>의 너비와 높이가 창 크기보다 작기 때문입니다. <br>을 많이 넣으면이 경우가 아니며 가운데 클릭하면 스크롤바가 나타납니다.

구글은 <body> 크기가 항상 창 크기보다 작다는 것을 (JS를 통해) 확인하고, 플러스 추가 <body style="overflow:hidden;">를 넣어 파이어 폭스에서 구글지도에 표시하기 위해 중간 클릭 스크롤을 방지 할 수 있었다.

일반적인 경우에는 거의 달성 할 수 없지만 때로는 유용 할 수 있습니다.

4

이것은 오래된 질문입니다. 제대로 이해하고 있다면 마우스 가운데 버튼을 클릭하여 스크롤을 사용하지 않도록 설정하려고합니다.

요즘, 당신은 바닐라 JS의 한 줄이 작업을 수행 할 수 있습니다

document.body.onmousedown = function(e) { if (e.button === 1) return false; } 
+1

IE 11, Chrome 및 Firefox에서이 기능이 작동하는지 확인할 수 있습니다. – emilhem

관련 문제