<a>의 하위 요소를 클릭 하였을때 a href 무시하기

<a>의 하위 요소를 클릭 하였을때 a href 무시하기

QA

<a>의 하위 요소를 클릭 하였을때 a href 무시하기

본문

<a href = "...">

       <span>x</span>

       <p>.........</p>

</a>

 

이런 구조에서 a 내부의 다른 부분을 클릭시에는 href의 주소로 이동하지만
span을 클릭했을 경우에만 href로 이동하는 것을 무시하고 별개의 기능이 작동하도록 하고 싶습니다.

방법이 있을까요?

이 질문에 댓글 쓰기 :

답변 3

a 태그에 position : relative

 

span 에 absolute 로 작업하면 어떨까요. 별도의 작동은 click 이벤트로 작동하면 될 것 같습니다.

 

A 태그가 아에 작동하지 않길 원하신다면 return false 선언하시면 되겠네요.

 

 

상당히 드문 코드를 원하시네요.... a 링크를 무력화시키는 스크립트는 아래와 같습니다.

 

<a id=my href = ".....">
</a>

<script>
my.onclick = function(e) {
    e.preventDefault();
}
</script>

 

그래서 불린변수를 하나 만들어 주고 불린변수가 참일 때만 링크를 무력화시키는 조건문을 걸은 다음...

span 마우스오버시에 불린변수는 true, 마우스아웃시에 불린변수는 false 가 들어가도록 하면 됩니다만.

이 코드가 왜 필요하신지 궁금하네요. 그냥 쉽게 <span> 을 링크태그 밖으로 빼면 될 터인데...

 


<a id=my href = ".....">
    <span id=you>x</span>
    <p>.........</p>
</a>
<script>
noLink = false;
my.onclick = function(e) {
    if (noLink) e.preventDefault();
}
you.onmouseover = function() {
    noLink = true;
}
you.onmouseout = function() {
    noLink = false;
}
</script>
답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT