태그에서 기본값() 방지
HTML과 jQuery 슬라이드가 있습니다.div링크를 클릭할 때 표시하거나 숨길 수 있습니다.
<ul class="product-info">
<li>
<a href="#">YOU CLICK THIS TO SHOW/HIDE</a>
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
$(this).next('div').slideToggle(200);
}
제 질문은:제가 어떻게 이용합니까preventDefault()링크 역할을 하고 URL 끝에 "#"을 추가하고 페이지 상단으로 이동하는 것을 중지하시겠습니까?
올바른 구문을 찾을 수 없습니다. 계속 오류가 발생합니다.
preventDefault()는 함수가 아닙니다.
다음과 같은 방법을 사용해 보십시오.
$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
event.preventDefault();
$(this).next('div').slideToggle(200);
});
속성 설정:href="javascript:;"
<ul class="product-info">
<li>
<a href="javascript:;">YOU CLICK THIS TO SHOW/HIDE</a>
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
를 사용하지 않는 것이 좋습니다.return false결과적으로 세 가지 일이 발생합니다.
- event.proventDefault();
- event.stop 전파();
- 콜백 실행을 중지하고 호출되면 즉시 반환합니다.
그래서 이런 상황에서는, 당신은 정말로 오직event.preventDefault();
문서 보관 - jQuery 이벤트: 거짓 반환 사용 중지(잘못됨)
1 - 쉬운 방법:
<a href="javascript:;">Click Me</a>
2 - 보이드(0) 사용:
<a href="javascript:void(0);">Click Me</a>
3 - 사용preventDefault():
<a href='#' onclick="event.preventDefault()">Click Me</a>
4 - 그러나 자바스크립트에서 이를 수행하는 또 다른 방법은 다음과 같습니다.inline onclick,IIFE,event그리고.preventDefault():
<a href='#' onclick="(function(e){e.preventDefault();})(event)">Click Me</a>
또는 클릭 이벤트에서 false를 반환할 수 있습니다.
$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
$(this).next('div').slideToggle(200);
+ return false;
});
그러면 A-Href가 작동하는 것을 멈출 수 있습니다.
그러나 사용적합성의 이유로 새 탭에서 링크를 열려는 사람들을 위해 href가 여전히 어딘가에 있어야 하는 이상적인 세계에서는;)
이것은 제가 방금 테스트한 비 JQuery 솔루션이며 작동합니다.
<html lang="en">
<head>
<script type="text/javascript">
addEventListener("load",function(){
var links= document.getElementsByTagName("a");
for (var i=0;i<links.length;i++){
links[i].addEventListener("click",function(e){
alert("NOPE!, I won't take you there haha");
//prevent event action
e.preventDefault();
})
}
});
</script>
</head>
<body>
<div>
<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.facebook.com">Facebook</a></li>
<p id="p1">Paragraph</p>
</ul>
</div>
<p>By Jefrey Bulla</p>
</body>
</html>
<ul class="product-info">
<li>
<a href="javascript:void(0);">YOU CLICK THIS TO SHOW/HIDE</a>
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
사용하다
자바스크립트:무효(0);
몇 번의 작업 후 페이지가 최종적으로 다음으로 이동해야 하는 경우<a href"...">link 다음을 수행할 수 있습니다.
jQuery("a").click(function(e){
var self = jQuery(this);
var href = self.attr('href');
e.preventDefault();
// needed operations
window.location = href;
});
그냥 css로 하는 게 어때요?
앵커 태그에서 'href' 속성을 꺼냅니다.
<ul class="product-info">
<li>
<a>YOU CLICK THIS TO SHOW/HIDE</a>
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
당신의 CSS에서
a{
cursor: pointer;
}
이벤트의 전파를 중단하는 것이 당신을 방해하지 않는다면, 그냥 사용하세요.
return false;
당신의 핸들러 끝에.jQuery에서는 기본 동작을 방지하고 이벤트 버블링을 중지합니다.
을 활용할 수 있습니다.return false;이벤트 전파를 중지하기 위한 이벤트 호출에서, 그것은 마치event.preventDefault();그것을 부정하는 것.또는 사용할 수 있습니다.javascript:void(0)href 속성을 사용하여 지정된 식을 평가한 다음 반환합니다.undefined본질적으로
이벤트가 호출될 때 이벤트 반환
<a href="" onclick="return false;"> ... </a>
공백 대소문자:
<a href="javascript:void(0);"> ... </a>
자세한 내용은 다음에서 확인할 수 있습니다.앵커 태그의 클릭 이벤트 수신기에 href에 void(0)와 'return false'를 추가하면 어떤 효과가 있습니까?
자바스크립트에서 당신은 그것을 사용할 수 있습니다.
window.event.preventDefault();
제 경우에는 효과가 있습니다.위의 행을 당신의 함수에 쓰시오.
언급URL : https://stackoverflow.com/questions/265478/preventdefault-on-an-a-tag
'programing' 카테고리의 다른 글
| 남은 공간을 View로 채우는 레이아웃을 만드는 방법은 무엇입니까? (0) | 2023.08.15 |
|---|---|
| JSP/Servlet 및 Ajax를 사용하여 서버에 파일을 업로드하려면 어떻게 해야 합니까? (0) | 2023.08.15 |
| 오류 메시지를 읽기 전에 Powershell 창이 사라짐 (0) | 2023.08.15 |
| 프로젝트는 모든 파일을 나열하거나 '포함' 패턴을 사용해야 합니다. (0) | 2023.08.15 |
| IE9 JavaScript 오류: SCRIPT5007: 'ui' 속성의 값을 가져올 수 없음: 개체가 null이거나 정의되지 않았습니다. (0) | 2023.08.10 |