'#' 링크를 클릭하면 페이지 맨 위로 이동하지 않도록 하려면 어떻게 해야 합니까?

'#' 링크를 클릭하면 페이지 맨 위로 이동하지 않도록 하려면 어떻게 해야 합니까?

현재사중입다니용다를 사용하고 .<a>클릭 이벤트 등을 시작하기 위한 jQuery가 포함된 태그.

제가 하고 있는 일의 예는 다음과 같습니다.<a href="#" class="someclass">Text</a>.

하지만 저는 '#'이 페이지를 페이지 맨 위로 이동시키는 것을 싫어합니다.제가 대신 무엇을 할 수 있을까요?

그래서 이건 오래된 일이지만...누군가 검색에서 이것을 발견할 경우를 대비해서.

그냥 사용하기"#/"에 "#"페이지가 뛰지 않습니다.

jQuery에서 클릭 이벤트를 처리할 때 false를 반환하여 링크가 일반적인 방법으로 응답하지 않도록 합니다. 즉, 기본 작업을 방지합니다.href발생 시 속성(PowerRoy의 코멘트와 에릭의 답변에 따라):

$('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');
});

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

사용할 수 있습니다.#0 이후로, 후이.0ID로 허용되지 않습니다. 페이지가 뛰지 않습니다.

<a href="#0" class="someclass">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()j에서 Query에서 클릭 이벤트를 전달하는 경우.

요소에 의미 있는 href 값이 없으면 링크가 아니므로 다른 요소를 대신 사용하는 것이 어떻습니까?

Neothor가 제안한 바와 같이, 스판도 마찬가지로 적절하며, 올바르게 스타일링된다면 클릭할 수 있는 항목으로 눈에 띄게 보일 것입니다.사용자의 마우스가 호버 이벤트 위로 이동할 때 요소가 '점등'되도록 호버 이벤트를 부착할 수도 있습니다.

하지만, 이렇게 말했으면, 당신은 당신의 사이트가 자바스크립트 없이 작동하지만, 그것이 이용 가능할 때 자바스크립트에 의해 향상되도록 사이트의 디자인을 재고하고 싶을 것입니다.

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

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

href="#"이 있는 링크를 사용하는 것도 접근성 문제입니다. 이 링크는 "링크 - 텍스트"로 표시되지만 사용자가 클릭하면 아무 데도 가지 않습니다.

그냥 사용하기

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

JQUERY

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

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

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

그#/ 이벤트를 합니다.trick은 파일을 저장합니다.따라서 뒤로 클릭하면 사용자가 원하는 대로 작동하지 않습니다.

$('body').on('click', 'a[href="#"]', function(e) {e.preventDefault() });이미 존재하는 콘텐츠와 로드 후 DOM에 추가된 모든 요소에 대해 작동하기 때문에 제가 진행한 방식입니다.

특히, 저는 이것을 부트스트랩 드롭다운 메뉴에서 실행해야 했습니다..btn-group(참고 자료) 그래서 저는 다음을 했습니다.

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

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

사용한 적이 있습니다.

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

페이지가 건너뛰는 것을 방지하려면, 당신은 전화해야 합니다.e.stopPropagation();화를한후에전을 부른 e.preventDefault();:

stopPropagation이벤트가 DOM 트리로 올라가는 것을 방지합니다.자세한 내용은 https://api.jquery.com/event.stoppropagation/ 에서 확인할 수 있습니다.

항상 사용해 왔습니다.

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

페이지 이동을 방지하려고 할 때.이게 최선인지는 모르겠지만, 몇 년 동안 잘 작동하고 있는 것 같습니다.

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

예.

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

저는 다음과 같은 것을 사용합니다.

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

페이지 이동 없이 동일한 페이지의 앵커 섹션으로 마이그레이트하려면 다음을 사용합니다.

예를 들어 "#" 대신 "#/"을 사용합니다.

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

추가가언무 뒤에 무언가 #페이지 포커스를 해당 ID를 가진 요소로 설정합니다.은 가장간해방은을 사용하는 입니다.#/j를 Query를 사용하는 경우에도 마찬가지입니다.jQuery에서 하고 있다면, "jQuery"라는 단어를 사용합니다.event.preventDefault()가는 길입니다.

그<a href="#!">Link</a>그리고.<a href="#/">Link</a>번이클 하야작않습니다지동하경우는릭해한상을. 에 대해 .여러 입력에 대해 각각 한 번의 이벤트 클릭만 가능합니다.

여전히 가장 좋은 방법은 을 하는 것입니다.<a href="#">Link</a>

그리고나서,

event.preventDefault();

저에게 가장 간단한 것은 이것을 하는 것이었습니다.

<a href="#" onclick="return false;">Some text</a>

JS를 사용하는 이유는 대부분의 현대 사이트가 JS에 의존하기 때문입니다.

다른 사람들이 이미 말했듯이, 또는 jQuery's로 추가할 수 있는 이벤트 수신기 내에서 페이지 맨 위로 스크롤하는 것을 방지할 수 있습니다..click()방법.이미 등록된 다른 수신기보다 먼저 이벤트 수신기를 호출해야 하는 문제가 있는 경우 캡처 단계에서 이벤트 수신기를 지정할 수 있습니다.useCapture parameter (으)ㄹ 수 있습니다.capture의 옵 개 서 사 경 필 드 우 는 를 사용하는 addEventListner.

$('<your selector goes here>').click(function(ev) {
    ev.preventDefault();
});

제가 덧붙이고 싶은 것은 이것이 작동하는 이유와 스크롤 투 톱이 애초에 발생하는 이유는 HTML 사양이 그렇게 되어야 하기 때문입니다.다음과 같은 내용을 포함하는 내용은 다음과 같습니다.

HTML 문서의 경우, 표시된 부분을 결정하려면 다음 처리 모델을 따라야 합니다.

1. fragment를 문서의 URL fragment로 지정합니다.

2. fragment가 빈 문자열인 경우 문서의 맨 위에 특수 값을 반환합니다.

[...]

보너스 정보:계속 읽어보면 다음을 설정할 경우에도 확인할 수 있습니다.href#top맨 위로 스크롤하도록 지정할 수도 있습니다.

사실, 만약 당신이 단지 거기에 있는 것을 원하지 않는다면.href전혀...하나만 추가하지 마세요.참고 항목:href 속성이 없는 앵커 태그는 안전합니까?HTML5에서는 앵커 태그가 없는 것이 유효합니다.href다음과 같은 내용을 포함하는 내용은 다음과 같습니다.

에 약에만.a에 요에없이 .href속성을 지정하면 요소는 관련이 있는 경우 요소의 내용만으로 구성된 링크가 배치될 수 있는 자리 표시자를 나타냅니다.

언급URL : https://stackoverflow.com/questions/3252730/how-can-i-prevent-a-click-on-a-link-from-jumping-to-top-of-page