답변:
가장 간단한 방법으로 confirm()인라인 onclick핸들러 에서 함수를 사용할 수 있습니다 .
<a href="delete.php?id=22" onclick="return confirm('Are you sure?')">Link</a>그러나 일반적으로 HTML과 Javascript 를 분리하고 싶습니다 . 따라서 인라인 이벤트 핸들러를 사용하지 말고 링크에 클래스를 넣고 이벤트 리스너를 추가하십시오.
<a href="delete.php?id=22" class="confirmation">Link</a>
...
<script type="text/javascript">
var elems = document.getElementsByClassName('confirmation');
var confirmIt = function (e) {
if (!confirm('Are you sure?')) e.preventDefault();
};
for (var i = 0, l = elems.length; i < l; i++) {
elems[i].addEventListener('click', confirmIt, false);
}
</script>이 예제 는 최신 브라우저에서만 작동합니다 (이전 IE의 경우 attachEvent(), 사용할 수 있고 브라우저 간 문제를 해결하는 jQuery와 같은 라이브러리를 returnValue구현 getElementsByClassName()하거나 사용할 수 있음). 이 고급 이벤트 처리 방법에 대한 자세한 내용 은 MDN을 참조하십시오 .
jQuery 팬보이로 간주되는 것을 멀리하고 싶지만 DOM 조작 및 이벤트 처리는 브라우저 차이를 가장 크게 도와주는 두 가지 영역입니다. jQuery를 사용 하면 다음과 같이 표시됩니다.
<a href="delete.php?id=22" class="confirmation">Link</a>
...
<!-- Include jQuery - see http://jquery.com -->
<script type="text/javascript">
$('.confirmation').on('click', function () {
return confirm('Are you sure?');
});
</script>confirm(…)인라인 핸들러에서 세미콜론을 생략하면 버그가 발생했습니다 . 나는 그것을 재현 할 수 없었다.
인라인 JavaScript를 피하는 것이 좋습니다.
var aElems = document.getElementsByTagName('a');
for (var i = 0, len = aElems.length; i < len; i++) {
aElems[i].onclick = function() {
var check = confirm("Are you sure you want to leave?");
if (check == true) {
return true;
}
else {
return false;
}
};
}JS 피들 데모 .
위의 내용은 선명도 / 기능을 유지하면서 공간을 줄이기 위해 업데이트되었습니다.
var aElems = document.getElementsByTagName('a');
for (var i = 0, len = aElems.length; i < len; i++) {
aElems[i].onclick = function() {
return confirm("Are you sure you want to leave?");
};
}JS 피들 데모 .
사용하기에 다소 시간 addEventListener()이 걸리는 업데이트 ( bažmegakapa가 제안한 대로 아래 주석에서) :
function reallySure (event) {
var message = 'Are you sure about that?';
action = confirm(message) ? true : event.preventDefault();
}
var aElems = document.getElementsByTagName('a');
for (var i = 0, len = aElems.length; i < len; i++) {
aElems[i].addEventListener('click', reallySure);
}JS 피들 데모 .
위의 기능은 각 개별 링크의 이벤트에 기능을 바인딩합니다. 이벤트 처리 (위임 사용)를 다음과 같은 조상 요소에 바인딩 할 수있을 때 잠재적으로 상당히 낭비입니다.
function reallySure (event) {
var message = 'Are you sure about that?';
action = confirm(message) ? true : event.preventDefault();
}
function actionToFunction (event) {
switch (event.target.tagName.toLowerCase()) {
case 'a' :
reallySure(event);
break;
default:
break;
}
}
document.body.addEventListener('click', actionToFunction);JS 피들 데모 .
이벤트 처리는 body일반적으로 클릭 가능한 다른 많은 요소를 포함하는 요소에 첨부되어 있기 때문에 중간 함수 ( actionToFunction)를 사용하여 해당 클릭으로 수행 할 작업을 결정했습니다. 클릭 된 요소는 링크입니다, 따라서이 경우 tagName의를 a, 클릭 취급이 전달됩니다 reallySure()기능.
참고 문헌 :
addEventListener). 그래도 +1입니다.
addEventListener()모델에 익숙해지지 않았다고 고백해야합니다 .
if(check == true)로 if(check).
당신은 또한 이것을 시도 할 수 있습니다 :
<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title">
Link Text
</a>JavaScript 코드를 작성하지 않고도 할 수 있습니다
<head>
<script src="/path/to/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="/path/to/jquery.Aplus.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
...
<a href="delete.php?id=22" class="confirm" title="Are you sure?">Link</a>
...
</body>addEventListener (또는 attachEvent)를 사용하여 이벤트 핸들러를 연결하는 경우이 메소드는 위의 응답과 약간 다릅니다.
function myClickHandler(evt) {
var allowLink = confirm('Continue with link?');
if (!allowLink) {
evt.returnValue = false; //for older Internet Explorer
if (evt.preventDefault) {
evt.preventDefault();
}
return false;
}
}이 핸들러를 다음 중 하나로 첨부 할 수 있습니다.
document.getElementById('mylinkid').addEventListener('click', myClickHandler, false);또는 이전 버전의 인터넷 익스플로러 :
document.getElementById('mylinkid').attachEvent('onclick', myClickHandler);window.event.
재미를 위해 모든 앵커 태그에 이벤트를 추가하는 대신 전체 문서에서 단일 이벤트를 사용하겠습니다 .
document.body.onclick = function( e ) {
// Cross-browser handling
var evt = e || window.event,
target = evt.target || evt.srcElement;
// If the element clicked is an anchor
if ( target.nodeName === 'A' ) {
// Add the confirm box
return confirm( 'Are you sure?' );
}
};앵커 태그가 많은 경우이 방법이 더 효율적입니다. 물론 모든 앵커 태그가있는 컨테이너에이 이벤트를 추가하면 더욱 효율적입니다.
대부분의 브라우저는에 전달 된 맞춤 메시지를 표시하지 않습니다 confirm().
이 방법을 사용하면 사용자가 <input>필드 값을 변경 한 경우 사용자 지정 메시지와 함께 팝업을 표시 할 수 있습니다 .
이 기능은 일부 링크 또는 페이지의 다른 HTML 요소 에만 적용 할 수 있습니다 . 확인이 필요한 모든 링크에 사용자 정의 클래스를 추가하고 다음 코드를 사용하십시오.
$(document).ready(function() {
let unsaved = false;
// detect changes in all input fields and set the 'unsaved' flag
$(":input").change(() => unsaved = true);
// trigger popup on click
$('.dangerous-link').click(function() {
if (unsaved && !window.confirm("Are you sure you want to nuke the world?")) {
return; // user didn't confirm
}
// either there are no unsaved changes or the user confirmed
window.location.href = $(this).data('destination');
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="Nuclear code here" />
<a data-destination="https://en.wikipedia.org/wiki/Boom" class="dangerous-link">
Launch nuke!
</a>예제에서 입력 값을 변경하여 작동 방식을 미리 봅니다.
프롬프트를 위해 PHP, HTML 및 JAVASCRIPT 사용
누군가 단일 파일에서 PHP, HTML 및 자바 스크립트 를 사용하려는 경우 아래 답변이 저에게 효과적입니다. 링크에 부트 스트랩 아이콘 "휴지통"을 사용했습니다.
<a class="btn btn-danger" href="<?php echo "delete.php?&var=$var"; ?>" onclick="return confirm('Are you sure want to delete this?');"><span class="glyphicon glyphicon-trash"></span></a>내가 PHP를 사용한 이유 중간에 코드를 는 처음부터 그것을 사용할 수 없기 때문입니다.
아래 코드는 저에게 효과적이지 않습니다.
echo "<a class='btn btn-danger' href='delete.php?&var=$var' onclick='return confirm('Are you sure want to delete this?');'><span class='glyphicon glyphicon-trash'></span></a>";그리고 첫 번째 코드에서와 같이 수정 한 다음 필요한 것만으로 실행합니다. 내 사건이 필요없는 누군가를 도울 수 있기를 바랍니다.