a태그(anchor)에서 href 혹은 onclick사용 & ajax 뒤로가기

https://thingsthis.tistory.com/130

# a태그 기본동작

앵커?해쉬? 인 # 는 현재 페이지에서의 이동을의미한다.

.....

<a href="#" id="abc">aaa</a>

.....

<a href="#abc">fff</a>

따라서 fff누르면 #abc( 아이디가 abc) 있는곳으로 화면이 이동( 실질적인 경로이동X , 현재페이지내에서이동)

url상태는  ~~#abc

거기서 aaa를누르면 # 는 최상위...페이지 젤 위로 이동함!

url상태는  ~~#

여기서 뒤로가기누르면 #abc로 이동. 

url상태는  ~~#abc

거기서 다시 뒤로가기누르면 

url상태는  ~~

이것은 a태그의 위치로 바로이동가능함

url에 ~~~#abc  입력하면 <a href="#abc">fff</a> 로 바로 이동함

# a태그(앵커)로 javascript function 호출하는법 2가지

1. 

<a href="javascript:callFunction();">javascript function</a>

    this가 전달되지않음

2.

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

    this전달됨

<a href="#" onclick="callFunction();">call function</a>

문제점 :

        onclick이벤트후 href를탄다.

        위와 같이 onclick 으로 함수호출 시 함수 호출 후 이벤트 버블링으로 인해 anchor 를 타서 

        브라우저 상단으로 이동해 버리는 문제가 있습니다.

        사실 "#wown" 하면 id가 wown인걸 찾아감

        그냥 #라고넣으면 페이지꼭대기(스크롤이동) 로 이동함

        따라서 함수처리후 href를 타는것을 방지하기위해 이벤트 내에서 return 함수명(); 

        해주고 함수내에서 빠져나갈때 무조건 return false를줌

해결방법 :

        피연산자를 실행하되 피연산자에서 처리된 값을 무시하고 무조건 undefined 를 return 하게 

        해주는 void 함수를 사용하여 코딩을 할 수가 있다.

<a href="javascript:void(0);" onclick="callFunction();">call function</a>

특정브라우저에서 페이지 이동안되므로 아래와같이...

<a href="javascript:void(0);" onclick="callFunction(); return false;">call function</a>

또는

<a href="#" onclick="callFunction(); return false;">call function</a>

<a href="#" onclick="return false;">call function</a>

    

    또다른방법

<a href="#" id="aa">fff</a>

$("#aa").on("click",function(e){

        e.preventDefault();    // 추가이벤트를 막아서 #의 최상위이동막음!!!

        alert(1);

})

---

# ajax호출시 뒤로가기이슈

https://beyondj2ee.wordpress.com/2013/08/16/ajax-%EB%92%A4%EB%A1%9C-%EA%B0%80%EA%B8%B0-%EB%B2%84%ED%8A%BC-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95/

https://blog.outsider.ne.kr/1276

두번째가 제대로인듯... 처음꺼는 뒤로가기라는버튼을 만들때인듯....

최초 url로 요청하자

url : ~~selectBoardList.do

그럼 최초 로딩하면서 1페이지 호출한다.

selectBoardList(1);

요청시 

gfv_currPage 변수에 현재페이지 등록

selectBoardList(1)에의해 ajax조회

조회후 콜백에 url에 해쉬붙임...

document.location.hash = "#"+data.paging.page;

그럼 url이 위에서 아래로 변함( 즉, 현재페이지번호를붙혀준거임 )

url : ~~selectBoardList.do#1

그리고 해쉬변경이벤트등록

아래와같이 해쉬등록할때 번호랑 현재페이지번호가같으면 동작안함

뒤로가기로인해 hash가 이전 hash로 변경되었을때 현재페이지번호와 다르기때문에

$(window).on('hashchange',function(){

        var hash = parseInt(location.hash.slice(1));

        

        // 최초 selectBoardList 조회

        // selectBoardList 콜백시 해쉬등록으로인해 selectBoardList조회

        // 따라서 두번 selectBoardList 되는걸막음

        if( hash != gfv_currPage){

               selectBoardList(hash);

        }

});

페이지이동버튼

아래처럼 리턴false해줘야 href="#" 동작안함

'<a class="page-link" href="#" onclick="_movePage('+ i + '); return false;">'+ i + '</a>';