기본 스크립 방식 line 방식
<html>
<head>
<style>
html{border:5px solid red;padding:30px;}
body{border:5px solid green;padding:30px;}
input{border:5px solid black;padding:30px;}
</style>
</head>
<body>
<p>
<label>prevent event on</label><input id="prevent" type="checkbox" name="eventprevent" value="on" />
</p>
<p>
<a href="http://opentutorials.org" onclick="if(document.getElementById('prevent').checked) return false;">opentutorials</a>
</p>
<p>
<form action="http://opentutorials.org" onsubmit="if(document.getElementById('prevent').checked) return false">
<input type="submit" />
</form>
</p>
</body>
</html>
프로포트 방식
<html>
<head>
<style>
html{border:5px solid red;padding:30px;}
body{border:5px solid green;padding:30px;}
input{border:5px solid black;padding:30px;}
</style>
</head>
<body>
<p>
<label>prevent event on</label><input id="prevent" type="checkbox" name="eventprevent" value="on" />
</p>
<p>
<a href="http://opentutorials.org">opentutorials</a>
</p>
<p>
<form action="http://opentutorials.org">
<input type="submit" />
</form>
</p>
<script>
document.querySelector('a').onclick = function(event){
if(document.getElementById('prevent').checked)
return false;
};
document.querySelector('form').onclick = function(event){
if(document.getElementById('prevent').checked)
return false;
};
</script>
</html>
addEventListerner 방식
<html>
<head>
<style>
html{border:5px solid red;padding:30px;}
body{border:5px solid green;padding:30px;}
input{border:5px solid black;padding:30px;}
</style>
</head>
<body>
<p>
<label>prevent event on</label><input id="prevent" type="checkbox" name="eventprevent" value="on" />
</p>
<p>
<a href="http://opentutorials.org">opentutorials</a>
</p>
<p>
<form action="http://opentutorials.org">
<input type="submit" />
</form>
</p>
<script>
document.querySelector('a').addEventListener('click', function(event){
if(document.getElementById('prevent').checked)
event.preventDefault();
});
document.querySelector('form').addEventListener('submit', function(event){
if(document.getElementById('prevent').checked)
event.preventDefault();
});
</script>
</html>
클릭에 관한거는 온클릭 프로포트 를 이용하는게 쉬운것 같다
'HTML 참고서 > HTML 생활코딩 Youtube' 카테고리의 다른 글
| 25.JavaScript Form event (0) | 2020.04.17 |
|---|---|
| 24.JavaScript load event (0) | 2020.04.17 |
| 22.JavaScript event 2 (0) | 2020.04.17 |
| 20.JavaScript event 1 (0) | 2020.04.17 |
| 19.JavaScript property (0) | 2020.04.17 |
Or71nH