테스트 사이트 - 개발 중인 베타 버전입니다

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

새미새미 4년 전 조회 2,434

<a href = "...">

       <span>x</span>

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

</a>

 

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

방법이 있을까요?

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
j
4년 전

a 태그에 position : relative

 

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

 

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

 

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

https://api.jquery.com/event.target/

<span에서 클릭

this==event.target인 경우는

event.stopPropagation()

으로 <a로 전달 안 되도록 하면 되지 않을까요?

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

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

 

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

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

 

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

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

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

 

</p>

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

    <span id=you>x</span>

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

</a></p>

<p><script>

noLink = false;

my.onclick = function(e) {

    if (noLink) e.preventDefault();

}

you.onmouseover = function() {

    noLink = true;

}

you.onmouseout = function() {

    noLink = false;

}

</script></p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인