'#'링크 클릭이 페이지 상단으로 이동하지 못하게하는 방법은 무엇입니까?

현재 <a>jQuery와 함께 태그를 사용하여 클릭 이벤트 등을 시작하고 있습니다.

예는 <a href="#" class="someclass">Text</a>

그러나 '#'이 페이지를 페이지 상단으로 이동시키는 방식이 싫습니다. 대신 무엇을 할 수 있습니까?

jQuery에서 클릭 이벤트를 처리하면 링크가 일반적인 방식으로 응답하지 않도록하려면 false를 리턴하십시오.href속성 을 방문하는 기본 조치가 발생하지 않도록하십시오 (PoweRoy의 의견 및 Erik의 답변에 따라 ).

$('a.someclass').click(function(e)
{
    // Special stuff to do when this link is clicked...

    // Cancel the default action
    e.preventDefault();
});

그래서 이것은 오래되었지만 ... 누군가가 검색에서 이것을 찾은 경우를 대비하여.

"#/"대신에 사용 "#"하면 페이지가 이동하지 않습니다.

다음과 같이 작성할 수도 있습니다.

<a href="javascript:void(0);"></a>

더 나은 방법은 모르겠지만 방법입니다 :)

해결책 # 1 : (일반)

<a href="#!" class="someclass">Text</a>

해결책 # 2 : (필요 javascript)

<a href="javascript:void(0);" class="someclass">Text</a>

솔루션 # 3 : (필요 jQuery)

<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
    e.preventDefault();
});
</script>

event.preventDefault()이것을 피하기 위해 사용할 수 있습니다 . 자세한 내용은 http://api.jquery.com/event.preventDefault/를 참조하십시오 .

그냥 사용하는 <input type="button" />대신 <a>원하는 경우 링크처럼 보이도록 스타일을과 CSS를 사용.

버튼은 클릭을 위해 특별히 만들어졌으며 href 속성이 필요하지 않습니다.

가장 좋은 방법은 onload 액션을 사용하여 버튼을 만들고 javascript를 통해 필요한 곳에 추가하는 것이므로 javascript를 비활성화하면 전혀 표시되지 않으며 사용자를 혼동하지 않습니다.

사용 href="#"하면 에이전트가 JavaScript를 지원하지 않는 경우 동일한 위치를 가리키는 수많은 다른 링크가 표시됩니다.

앵커를 사용하려면 제안 된 다른 답변과 같이 http://api.jquery.com/event.preventDefault/ 를 사용할 수 있습니다 .

범위와 같은 다른 요소를 사용하고 클릭 이벤트를 해당 요소에 첨부 할 수도 있습니다.

$("span.clickable").click(function(){
alert('Yeah I was clicked');
});

ID로 사용할 수 없으므로 페이지로 이동하지 않으므로 #0href로 사용할 수 있습니다 0.

<a href="#0" class="someclass">Text</a>

$('a[href="#"]').click(function(e) {e.preventDefault(); });

그냥 사용

<a href="javascript:;" class="someclass">Text</a>

쿼리

$('.someclass').click(function(e) { alert("action here"); }

요소에 의미있는 href 값이 없으면 실제로 링크가 아니므로 다른 요소를 대신 사용하지 않는 이유는 무엇입니까?

Neothor가 제안한 것처럼 스팬은 적절하고 스타일이 올바르게 지정되면 클릭 할 수있는 항목으로 눈에 띄게 나타납니다. 마우스 오버 이벤트를 연결하여 사용자의 마우스가 움직일 때 '점등'을 만들 수 있습니다.

그러나 이것을 말하면 사이트 디자인은 자바 스크립트없이 작동하도록 다시 생각할 수 있지만 사용 가능한 경우 자바 스크립트로 향상됩니다.

href = "#"링크는 거의 항상 버튼 요소로 대체되어야합니다.

<button class="someclass">Text</button>

href = "#"와 함께 링크를 사용하면 접근성 문제가 될 수 있습니다. 이러한 링크는 화면 판독기에 표시되므로 "링크-텍스트"가 표시되지만 사용자가 클릭하면 아무데도 가지 않습니다.

href 속성없이 앵커 태그를 전달하고 jQuery를 사용하여 필요한 작업을 수행 할 수 있습니다.

<a class="foo">bar</a>

나는 사용했다 :

<a href="javascript://nop/" class="someClass">Text</a>

#/트릭은 작동하지만, 브라우저에 기록 이벤트를 추가합니다. 따라서 사용자가 원하거나 기대할 수 있으므로 뒤로 클릭은 작동하지 않습니다.

$('body').click('a[href="#"]', function(e) {e.preventDefault() }); 이미 존재하는 내용과로드 후 DOM에 추가 된 모든 요소에 작동하므로 내가 갔던 방식입니다.

특히 .btn-group(Reference) 내부의 부트 스트랩 드롭 다운 메뉴 에서이 작업을 수행해야하므로 다음과 같이했습니다 .

$('body').click('.dropdown-menu li a[href="#"]', function(e) {e.preventDefault() });

이런 식으로 대상을 지정했으며 페이지의 다른 항목에는 영향을 미치지 않았습니다.

나는 항상 사용했다 :

<a href="#?">Some text</a>

페이지 점프를 방지하려고 할 때. 이것이 최선인지 확실하지 않지만 수년 동안 잘 작동 한 것 같습니다.

JavaScript없이 페이지가 맨 위로 이동하지 못하게하는 4 가지 방법이 있습니다.

옵션 1:

<a href="#0">Link</a>

옵션 2 :

<a href="#!">Link</a>

옵션 3 :

<a href="#/">Link</a>

옵션 4 ( 권장하지 않음 ) :

<a href="javascript:void(0);">Link</a>

그러나 event.preventDefault()jQuery에서 클릭 이벤트를 처리하는 경우 사용 하는 것이 좋습니다 .

jquery를 처리 한 후 false를 반환 할 수도 있습니다.

예 :

$(".clickableAnchor").live(
    "click",
    function(){
        //your code
        return false; //<- prevents redirect to href address
    }
);

나는 이와 같은 것을 사용한다 :

<a href="#null" class="someclass">Text</a>

페이지가 점프하지 않도록하려면 전화해야합니다. e.stopPropagation(); 한 후 호출e.preventDefault(); .

stopPropagation이벤트가 DOM 트리로 올라가지 못하게합니다. 자세한 정보는 여기 : https://api.jquery.com/event.stoppropagation/

페이지를 넘지 않고 동일한 페이지의 앵커 섹션으로 마이그레이션하려면 다음을 사용하십시오.

"#"대신 "# /"를 사용하십시오. 예 :

<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..

뒤에 무언가를 추가하면 #해당 ID를 가진 요소에 페이지의 초점이 설정됩니다. 가장 간단한 해결책은 #/jQuery 를 사용 하는 경우에도 사용 하는 것입니다. 그러나 jQuery에서 이벤트를 처리하는 경우 event.preventDefault()갈 길입니다.

<a href="#!">Link</a>및<a href="#/">Link</a> 작동하지 않음 한 번 이상 동일한 입력을 클릭해야하는 경우 .. 그것은 단지 여러 개의 입력에 각각 1 이벤트 클릭으로합니다.

여전히 가장 좋은 방법은 <a href="#">Link</a>

그때,

event.preventDefault();