반응형
HTML에서 href 대신 JavaScript 함수를 호출하는 방법
HTML로 된 모형이 있습니다.
<a href="javascript:ShowOld(2367,146986,2)"><img title="next page" alt="next page" src="/themes/me/img/arrn.png"></a>
요청을 보냈을 때 서버에서 응답을 받았습니다.
이 모형으로 내 코드를 서버로 보내는 AJAX 요청에 대한 응답을 받았습니다.
글쎄, 모든 것이 괜찮지 만 링크를 클릭하면 브라우저가 기능을 링크로 열고 싶어합니다. 클릭하면 주소 표시 줄이
javascript:ShowOld(2367,146986,2)
작동하는 방화범에서 이것을하고 싶다면 URL 인 브라우저를 의미합니다. 이제 누군가가 링크를 클릭하면 브라우저에서 브라우저에서 열려는 대신 DOM에 이미로드 된 함수를 호출하려고합니다.
해당 구문은 정상적으로 작동하지만이 대안을 시도해 볼 수 있습니다.
<a href="javascript:void(0);" onclick="ShowOld(2367,146986,2);">
또는
<a href="javascript:ShowOld(2367, 146986, 2);">
문자열 값에 대한 업데이트 된 답변
문자열을 전달하는 경우 함수의 매개 변수에 작은 따옴표를 사용하십시오.
<a href="javascript:ShowOld('foo', 146986, 'bar');">
"클릭 이벤트 처리기"만있는 경우 <button>
대신 사용하십시오 . 링크에는 특정 의미가 있습니다.
예 :
<button onclick="ShowOld(2367,146986,2)">
<img title="next page" alt="next page" src="/themes/me/img/arrn.png">
</button>
자바 스크립트를 눈에 띄지 않게 만드십시오.
- href 속성에 실제 링크를 사용해야합니다.
- 클릭 이벤트에 리스너를 추가하여 아약스를 처리합니다.
href="#" onclick="javascript:ShowOld(2367,146986,2)
스팬에 약간의 CSS를 사용하여 다음과 같은 링크처럼 보이게합니다.
CSS :
.link {
color:blue;
text-decoration:underline;
cursor:pointer;
}
HTML :
<span class="link" onclick="javascript:showWindow('url');">Click Me</span>
자바 스크립트 :
function showWindow(url) {
window.open(url, "_blank", "directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes");
}
또한 javascript와 HTML을 분리해야합니다.
HTML :
<a href="#" id="function-click"><img title="next page" alt="next page" src="/themes/me/img/arrn.png"></a>
자바 스크립트 :
myLink = document.getElementById('function-click');
myLink.onclick = ShowOld(2367,146986,2);
ShowOld 함수의 마지막 줄이 다음과 같은지 확인하십시오.
return false;
이렇게하면 브라우저에서 링크가 열리지 않습니다.
참고 URL : https://stackoverflow.com/questions/5003867/how-to-call-javascript-function-instead-of-href-in-html
반응형
'Development Tip' 카테고리의 다른 글
동적으로 할당 된 어레이의 이상적인 성장률은 얼마입니까? (0) | 2020.10.20 |
---|---|
Java에서 Duration을 어떻게 "예쁜 인쇄"할 수 있습니까? (0) | 2020.10.20 |
JQuery Ajax Post 결과 500 내부 서버 오류 발생 (0) | 2020.10.20 |
Cordova : JDK 1.8 이상에 대한 요구 사항 확인 실패 (0) | 2020.10.20 |
한 프로젝트의 spring-config.xml을 다른 프로젝트의 spring-config.xml로 가져 오는 방법은 무엇입니까? (0) | 2020.10.20 |