[javascript] <a> 링크를 클릭 할 때 확인 대화 상자를 표시하는 방법은 무엇입니까?

이 링크에 사용자에게 ” 정말입니까? ” 예 / 아니요 ”.

<a href="delete.php?id=22">Link</a>

사용자가 “예”를 클릭하면 “아니오”인 경우 아무 것도 발생하지 않으면 링크가로드되어야합니다.

내가 사용하는 형태로 그렇게하는 방법을 알고 onclick그 반환하는 함수를 실행 true하거나 false. 그러나 <a>링크로 어떻게 이것을 합니까?

답변

인라인 이벤트 핸들러

가장 간단한 방법으로 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

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>

답변

인라인 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()기능.

참고 문헌 :

답변

<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>

답변

당신은 또한 이것을 시도 할 수 있습니다 :

<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title">
    Link Text
</a>

답변

jAplus

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);

답변

재미를 위해 모든 앵커 태그에 이벤트를 추가하는 대신 전체 문서에서 단일 이벤트를 사용하겠습니다 .

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?' );
    }
};

앵커 태그가 많은 경우이 방법이 더 효율적입니다. 물론 모든 앵커 태그가있는 컨테이너에이 이벤트를 추가하면 더욱 효율적입니다.