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

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

---

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

However, having said this, you may want to rethink the design of your site so that it functions without javascript, but is enhanced by javascript when it is available.

---

Links with href="#" should almost always be replaced with a button element:

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

Using links with href="#" is also an accessibility concern as these links will be visible to screen readers, which will read out "Link - Text" but if the user clicks it won't go anywhere.

---

You could just pass an anchor tag without an href property, and use jQuery to do the required action:

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

---

I have used:

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

---

The #/ trick works, but adds a history event to the browser. So, clicking back doesn't work as the user may want/expect it to.

$('body').click('a[href="#"]', function(e) {e.preventDefault() }); is the way I went, as it works for already existing content, and any elements added to the DOM after load.

Specifically, I needed to do this in a bootstrap dropdown-menu inside of a .btn-group(Reference), so I did:

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

This way it was targeted, and didn't affect anything thing else on the page.

---

I've always used:

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

when trying to prevent the page jump. Not sure if this is the best, but it seems to have been working well for years.

---

You can also return false after processing your jquery.

Eg.

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

---

I use something like this:

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

---

To prevent the page from jumping, you need to call e.stopPropagation(); after calling e.preventDefault();:

stopPropagation prevents the event from going up the DOM tree. More info here: https://api.jquery.com/event.stoppropagation/

---

If you want to migrate to an Anchor Section on the same page without page jumping up use:

Just use "#/" instead of "#" e.g

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

---

There are 4 similar ways to prevent the page from jumping to the top without any JavaScript:

Option 1:

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

Option 2:

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

Option 3:

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

Option 4 (Not recommended):

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

But it's better to use event.preventDefault() if you are handing the click event in jQuery.

---

Adding something after # sets the focus of page to the element with that ID. Simplest solution is to use #/ even if you are using jQuery. However if you are handling the event in jQuery, event.preventDefault() is the way to go.

---

The <a href="#!">Link</a> and <a href="#/">Link</a> does not work if one has to click on the same input more than once.. it only takes in 1 event click for each on multiple inputs.

still the best way to go is with <a href="#">Link</a>

then,

event.preventDefault();

참고URL : https://stackoverflow.com/questions/3252730/how-to-prevent-a-click-on-a-link-from-jumping-to-top-of-page