<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>
https://api.jquery.com/event.target/
<span에서 클릭
this==event.target인 경우는
event.stopPropagation()
으로 <a로 전달 안 되도록 하면 되지 않을까요?
답변을 작성하시기 전에 로그인 해주세요.